<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光影艺术空间 - 五神鸟数字化艺术展馆</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
        
        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-color: #0a1a35;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* 顶部导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            height: 80px;
            background: rgba(10, 26, 53, 0.9);
            backdrop-filter: blur(10px);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5%;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 24px;
            color: #d4af37;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            position: relative;
        }
        
        .nav-links a.active {
            color: #d4af37;
        }
        
        .nav-links a.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #d4af37;
        }
        
        .utility-buttons {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .lang-btn {
            border: 1px solid #d4af37;
            color: white;
            padding: 2px 10px;
            font-size: 12px;
            border-radius: 3px;
        }
        
        /* 全屏区块 */
        .full-screen {
            height: 100vh;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        
        /* 神鸟区特效 - 全新设计 */
        .hero {
            background: #040912;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            perspective: 1000px;
        }
        
        /* 背景元素 */
        .dark-essence {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(15,30,60,0.6) 0%, rgba(4,9,18,1) 70%);
            z-index: 1;
            animation: darkPulse 8s infinite alternate ease-in-out;
        }
        
        /* 光束系统 */
        .dynamic-light-system {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            overflow: hidden;
        }
        
        .light-beam-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            transform-style: preserve-3d;
        }
        
        .light-beam {
            position: absolute;
            top: -10%;
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
            transform-origin: top center;
            z-index: 2;
            filter: blur(2px);
        }
        
        .primary-beam {
            width: 150px;
            height: 130%;
            background: linear-gradient(to bottom, 
                rgba(255,255,255,0.9) 0%, 
                rgba(255,253,240,0.8) 20%,
                rgba(255,248,220,0.7) 50%, 
                rgba(212,175,55,0.5) 80%, 
                transparent 100%);
            clip-path: polygon(45% 0%, 55% 0%, 65% 100%, 35% 100%);
            animation: primaryBeamMove 8s infinite alternate ease-in-out,
                       beamFlicker 4s infinite;
        }
        
        .secondary-beam {
            width: 100px;
            height: 120%;
            background: linear-gradient(to bottom, 
                rgba(255,255,255,0.7) 0%, 
                rgba(255,253,240,0.6) 30%,
                rgba(255,248,220,0.4) 60%, 
                rgba(212,175,55,0.2) 85%, 
                transparent 100%);
            clip-path: polygon(40% 0%, 60% 0%, 70% 100%, 30% 100%);
            animation: secondaryBeamMove 10s infinite alternate ease-in-out,
                       beamFlicker 3s infinite 0.5s;
            opacity: 0.8;
            transform: translateX(-70%) rotate(-2deg);
        }
        
        .tertiary-beam {
            width: 80px;
            height: 110%;
            background: linear-gradient(to bottom, 
                rgba(255,255,255,0.5) 0%, 
                rgba(255,253,240,0.4) 30%,
                rgba(255,248,220,0.3) 60%, 
                rgba(212,175,55,0.1) 85%, 
                transparent 100%);
            clip-path: polygon(35% 0%, 65% 0%, 75% 100%, 25% 100%);
            animation: tertiaryBeamMove 12s infinite alternate ease-in-out,
                       beamFlicker 5s infinite 1s;
            opacity: 0.6;
            transform: translateX(60%) rotate(3deg);
        }
        
        .light-particles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            pointer-events: none;
        }
        
        .light-edge-fracture {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 100%;
            background: 
                radial-gradient(ellipse at center, 
                    rgba(255,255,255,0.1) 0%, 
                    rgba(212,175,55,0.05) 40%, 
                    transparent 70%);
            z-index: 2;
            filter: blur(3px);
            animation: fracturePulse 3s infinite alternate;
        }
        
        .tyndall-effect {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 100%;
            background: radial-gradient(
                ellipse at center, 
                rgba(255,255,255,0.03) 0%, 
                rgba(212,175,55,0.01) 40%, 
                transparent 70%);
            z-index: 1;
            filter: blur(10px);
            opacity: 0.7;
            animation: tyndallWave 15s infinite alternate ease-in-out;
        }
        
        /* 神鸟实体 */
        .phoenix-entity {
            position: absolute;
            height: 65vh;
            width: auto;
            z-index: 4;
            transform-style: preserve-3d;
            animation: phoenixFloat 8s infinite alternate ease-in-out;
        }
        
        .phoenix-silhouette {
            position: relative;
            height: 100%;
            width: auto;
            filter: drop-shadow(0 0 5px rgba(212,175,55,0.5));
        }
        
        .phoenix-svg {
            height: 100%;
            width: auto;
            filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
        }
        
        .crystal-feathers {
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="600" viewBox="0 0 300 600"><g fill="none" stroke="%23ffffff" stroke-width="0.5" stroke-opacity="0.6"><path d="M150,150 L200,100 M150,150 L180,170 M150,150 L190,130" /><path d="M180,200 L230,170 M180,200 L200,230 M180,200 L210,180" /><path d="M160,250 L200,230 M160,250 L180,270 M160,250 L190,260" /><path d="M170,300 L220,290 M170,300 L190,330 M170,300 L200,310" /><path d="M150,350 L190,330 M150,350 L170,380 M150,350 L180,350" /></g></svg>') no-repeat;
            opacity: 0;
            animation: featherReveal 5s infinite alternate ease-in-out;
        }
        
        .dark-smoke-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 60%;
            height: 100%;
            overflow: hidden;
            z-index: 3;
        }
        
        .ember-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
        }
        
        .phoenix-eye {
            animation: eyePulse 2s infinite alternate ease-in-out;
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.8))
                   drop-shadow(0 0 10px rgba(255,255,255,0.4));
        }
        
        /* 标题组 */
        .title-group {
            position: relative;
            z-index: 10;
            text-align: center;
            transform: translateY(10vh);
            text-shadow: 0 0 15px rgba(0,0,0,0.7);
        }
        
        .title-light-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120%;
            height: 140%;
            background: radial-gradient(
                ellipse at center, 
                rgba(212,175,55,0.15) 0%, 
                rgba(212,175,55,0.05) 30%, 
                transparent 70%);
            z-index: -1;
            filter: blur(5px);
            animation: titleLightPulse 4s infinite alternate;
        }
        
        /* 粒子系统 */
        .particle-system {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 6;
        }
        
        .dust-particles, .light-fragments {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        /* 动画效果定义 */
        @keyframes primaryBeamMove {
            0% { transform: translateX(-50%) rotate(0deg); }
            50% { transform: translateX(-49%) rotate(0.5deg); }
            100% { transform: translateX(-50%) rotate(0deg); }
        }
        
        @keyframes secondaryBeamMove {
            0% { transform: translateX(-70%) rotate(-2deg); }
            50% { transform: translateX(-69%) rotate(-2.5deg); }
            100% { transform: translateX(-70%) rotate(-2deg); }
        }
        
        @keyframes tertiaryBeamMove {
            0% { transform: translateX(60%) rotate(2deg); }
            50% { transform: translateX(61%) rotate(2.5deg); }
            100% { transform: translateX(60%) rotate(2deg); }
        }
        
        /* 光圈样式和动画 */
        .light-halo {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(
                circle,
                rgba(255, 255, 255, 0.8) 0%,
                rgba(255, 253, 240, 0.6) 20%,
                rgba(255, 248, 220, 0.4) 40%,
                rgba(212, 175, 55, 0.2) 70%,
                transparent 100%
            );
            filter: blur(8px);
            opacity: 0;
            z-index: 3;
        }
        
        .halo-large {
            width: 200px;
            height: 200px;
            animation: haloFade 8s infinite alternate ease-in-out;
        }
        
        .halo-medium {
            width: 150px;
            height: 150px;
            animation: haloFade 6s infinite alternate-reverse ease-in-out;
            animation-delay: 2s;
        }
        
        .halo-small {
            width: 100px;
            height: 100px;
            animation: haloFade 4s infinite alternate ease-in-out;
            animation-delay: 1s;
        }
        
        @keyframes haloFade {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
        }
        
        @keyframes beamFlicker {
            0%, 100% { opacity: 0.95; }
            10%, 30%, 50%, 70%, 90% { opacity: 1; }
            20%, 40%, 60%, 80% { opacity: 0.85; }
            5%, 25%, 45%, 65%, 85% { opacity: 0.9; }
        }
        
        @keyframes fracturePulse {
            0% { opacity: 0.7; width: 160px; }
            50% { opacity: 0.9; width: 170px; }
            100% { opacity: 0.7; width: 155px; }
        }
        
        @keyframes tyndallWave {
            0% { transform: translateX(-50%) scale(1); opacity: 0.6; }
            50% { transform: translateX(-50%) scale(1.05); opacity: 0.8; }
            100% { transform: translateX(-50%) scale(0.95); opacity: 0.7; }
        }
        
        @keyframes phoenixFloat {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(5px); }
        }
        
        @keyframes featherReveal {
            0% { opacity: 0; transform: translateX(10px); }
            50% { opacity: 0.8; transform: translateX(0); }
            100% { opacity: 0.6; transform: translateX(5px); }
        }
        
        @keyframes eyePulse {
            0% { opacity: 0.9; r: 8; }
            50% { opacity: 1; r: 8.5; }
            100% { opacity: 0.95; r: 7.5; }
        }
        
        @keyframes darkPulse {
            0% { background-position: 0% 0%; }
            50% { background-position: 2% 1%; }
            100% { background-position: 0% 0%; }
        }
        
        @keyframes titleLightPulse {
            0% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); }
            100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.98); }
        }
        
        .main-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 8vw;
            color: #d4af37;
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
            margin-bottom: 20px;
        }
        
        .sub-title {
            font-size: 2vw;
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* 神鸟展示区 - 基础样式 */
        .bird-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .bird-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 4vw;
            margin-bottom: 20px;
            text-align: center;
            z-index: 10;
        }
        
        .bird-silhouette {
            height: 50vh;
            width: auto;
            margin-bottom: 30px;
            z-index: 10;
        }
        
        .bird-desc {
            font-size: 1.8vw;
            text-align: center;
            z-index: 10;
        }

        /* 鹪明特殊样式 */
        .jiaoMing-section {
            perspective: 1000px;
            background: #071428;
        }

        .jiaoMing-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .bamboo-forest {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="none" stroke="%23173040" stroke-width="0.5"><path d="M10,0 V100 M25,0 V100 M40,0 V100 M55,0 V100 M70,0 V100 M85,0 V100" /></g></svg>');
            opacity: 0.2;
            z-index: 1;
        }
        
        /* 幽昌特殊样式 */
        .youChang-section {
            perspective: 1000px;
            background: #0a0822;
            overflow: hidden;
        }

        .youChang-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .void-mist {
            position: absolute;
            width: 150%;
            height: 150%;
            background: radial-gradient(ellipse at center,
                rgba(77, 5, 232, 0.05) 0%,
                rgba(54, 6, 95, 0.1) 30%,
                rgba(30, 9, 53, 0.15) 70%,
                rgba(8, 5, 20, 0.2) 100%);
            opacity: 0.8;
            z-index: 1;
            animation: mistMove 30s infinite alternate ease-in-out;
        }

        .star-nebula {
            position: absolute;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><filter id="nebula-filter"><feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" result="noise" /><feDisplacementMap in="SourceGraphic" in2="noise" scale="100" xChannelSelector="R" yChannelSelector="G" /></filter><rect width="600" height="600" fill="none" stroke="%23916a19" stroke-width="0.5" stroke-opacity="0.3" filter="url(%23nebula-filter)" /></svg>');
            opacity: 0.5;
            z-index: 2;
            animation: nebulaMove 120s infinite linear;
        }

        .mystic-runes {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><g fill="none" stroke="%23d4af37" stroke-width="0.3" opacity="0.3"><path d="M50,50 L100,100 M150,50 L100,100 M100,100 L100,150" /><path d="M200,50 L250,100 M200,150 L250,100 M250,100 L200,100" /><path d="M50,200 L100,250 M150,200 L100,250 M100,250 L100,200" /><path d="M200,200 L250,250 M200,250 L250,200 M225,200 L225,250" /></g></svg>');
            opacity: 0.2;
            z-index: 3;
            animation: runesMove 180s infinite linear;
        }

        .blue-spotlight {
            position: absolute;
            top: -20%;
            left: 30%;
            width: 40%;
            height: 150%;
            background: conic-gradient(
                from 270deg at 50% 0%,
                rgba(138, 43, 226, 0) 0deg,
                rgba(72, 61, 139, 0.05) 45deg,
                rgba(25, 25, 112, 0.1) 90deg,
                rgba(25, 25, 112, 0.1) 270deg,
                rgba(72, 61, 139, 0.05) 315deg,
                rgba(138, 43, 226, 0) 360deg
            );
            z-index: 4;
            filter: blur(10px);
            animation: spotlightPulse 8s infinite alternate ease-in-out;
        }

        /* 标题样式 */
        .youChang-title-area {
            position: absolute;
            top: 10%;
            left: 10%;
            z-index: 20;
            text-align: left;
        }

        .youChang-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 5vw;
            color: #8A2BE2;
            margin: 0;
            text-shadow: 0 0 15px rgba(25, 25, 112, 0.8), 
                        0 0 30px rgba(25, 25, 112, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 0.5s;
        }

        .youChang-subtitle {
            font-family: 'Segoe UI', sans-serif;
            font-weight: 300;
            font-size: 2vw;
            color: #B0C4DE;
            margin: 0;
            letter-spacing: 5px;
            opacity: 0;
            animation: fadeIn 2s forwards 1s;
        }

        /* 神鸟实体 */
        .youChang-entity {
            position: absolute;
            width: 60vh;
            height: 60vh;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .shadow-body {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><defs><filter id="shadow-filter"><feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur" /><feFlood flood-color="%23331466" flood-opacity="0.6" result="color" /><feComposite in="color" in2="blur" operator="in" result="shadow" /><feComposite in="SourceGraphic" in2="shadow" operator="over" /></filter></defs><path d="M200,100 Q150,200 100,250 Q50,350 100,400 Q150,450 200,500 Q250,450 300,400 Q350,350 300,250 Q250,200 200,100Z" fill="%230a0a0a" stroke="%234b0082" stroke-width="1.5" filter="url(%23shadow-filter)" /></svg>') center/contain no-repeat;
            filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.3));
            animation: floatBody 6s infinite alternate ease-in-out;
        }

        .golden-patterns {
            position: absolute;
            width: 90%;
            height: 90%;
            top: 5%;
            left: 5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><path d="M150,150 L170,170 M230,150 L250,170 M200,250 L200,300 M170,350 L150,380 M230,350 L250,380 M120,250 L280,250" stroke="%23d4af37" stroke-width="1" stroke-opacity="0.6" stroke-dasharray="5,15"/></svg>') center/contain no-repeat;
            opacity: 0.4;
            animation: patternPulse 4s infinite alternate;
        }

        .purple-fire-eyes {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><defs><radialGradient id="eye-glow" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5"><stop offset="0%" stop-color="%23ffffff" /><stop offset="30%" stop-color="%23a855f7" /><stop offset="100%" stop-color="%238A2BE2" stop-opacity="0" /></radialGradient></defs><circle cx="150" cy="200" r="15" fill="url(%23eye-glow)" /><circle cx="250" cy="200" r="15" fill="url(%23eye-glow)" /></svg>') center/contain no-repeat;
            filter: blur(2px);
            animation: firePulse 3s infinite alternate;
        }

        .golden-edge-glow {
            position: absolute;
            width: 110%;
            height: 110%;
            top: -5%;
            left: -5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><path d="M200,100 Q150,200 100,250 Q50,350 100,400 Q150,450 200,500 Q250,450 300,400 Q350,350 300,250 Q250,200 200,100Z" fill="none" stroke="%23d4af37" stroke-width="3" stroke-opacity="0.3"/></svg>') center/contain no-repeat;
            filter: blur(5px);
            opacity: 0.6;
            animation: glowPulse 4s infinite alternate;
        }

        .youChang-shadow {
            position: absolute;
            width: 80%;
            height: 20%;
            bottom: -5%;
            left: 10%;
            border-radius: 50%;
            background: radial-gradient(
                ellipse at center,
                rgba(138, 43, 226, 0.3),
                rgba(72, 61, 139, 0.1) 60%,
                transparent 80%
            );
            filter: blur(10px);
            transform: rotateX(60deg);
        }

        /* 黑羽粒子系统 */
        .feather-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .feather {
            position: absolute;
            width: 8px;
            height: 15px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15"><path d="M4,0 L8,5 L4,15 L0,5 Z" fill="%230a0a0a" stroke="%238A2BE2" stroke-width="0.5" /></svg>') center/contain no-repeat;
            opacity: 0;
            filter: drop-shadow(0 0 2px #d4af37);
        }

        /* 技术芯片标签特殊样式 */
        .youChang-chips {
            position: absolute;
            bottom: 10%;
            right: 5%;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 50;
        }

        .youChang-chip {
            padding: 8px 16px;
            border-radius: 30px;
            background: rgba(72, 61, 139, 0.2);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(138, 43, 226, 0.3);
            color: white;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
            animation: chipPulse 3s infinite alternate;
            opacity: 0;
            transform: translateX(50px);
        }

        .youChang-chip:nth-child(1) {
            animation-delay: 1.5s;
        }

        .youChang-chip:nth-child(2) {
            animation-delay: 2s;
        }

        .youChang-chip:nth-child(3) {
            animation-delay: 2.5s;
        }

        .youChang-desc {
            position: absolute;
            bottom: 15%;
            left: 10%;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 2vw;
            color: rgba(255, 255, 255, 0.7);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
            opacity: 0;
            animation: fadeIn 2s forwards 2s;
        }

        /* 幽昌特有动画 */
        @keyframes mistMove {
            0% { transform: translateX(0) translateY(0); opacity: 0.6; }
            100% { transform: translateX(-5%) translateY(-5%); opacity: 0.8; }
        }

        @keyframes nebulaMove {
            0% { transform: translateX(0) rotate(0deg); }
            100% { transform: translateX(-50%) rotate(10deg); }
        }

        @keyframes runesMove {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            100% { transform: translateX(-25%) translateY(-15%) rotate(5deg); }
        }

        @keyframes spotlightPulse {
            0% { opacity: 0.5; transform: translateY(0) scale(1); }
            100% { opacity: 0.7; transform: translateY(2%) scale(1.05); }
        }
        
        /* 发明特殊样式 */
        .faMing-section {
            perspective: 1000px;
            background: #110a02;
            overflow: hidden;
        }

        .faMing-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .grid-perspective {
            position: absolute;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g stroke="%23FFD700" stroke-opacity="0.15" stroke-width="0.5"><line x1="0" y1="10" x2="100" y2="10" /><line x1="0" y1="20" x2="100" y2="20" /><line x1="0" y1="30" x2="100" y2="30" /><line x1="0" y1="40" x2="100" y2="40" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="60" x2="100" y2="60" /><line x1="0" y1="70" x2="100" y2="70" /><line x1="0" y1="80" x2="100" y2="80" /><line x1="0" y1="90" x2="100" y2="90" /><line x1="10" y1="0" x2="10" y2="100" /><line x1="20" y1="0" x2="20" y2="100" /><line x1="30" y1="0" x2="30" y2="100" /><line x1="40" y1="0" x2="40" y2="100" /><line x1="50" y1="0" x2="50" y2="100" /><line x1="60" y1="0" x2="60" y2="100" /><line x1="70" y1="0" x2="70" y2="100" /><line x1="80" y1="0" x2="80" y2="100" /><line x1="90" y1="0" x2="90" y2="100" /></g></svg>');
            transform-origin: center;
            transform: perspective(500px) rotateX(60deg) scale(3);
            transform-style: preserve-3d;
            opacity: 0.4;
            z-index: 1;
            animation: gridPulse 20s infinite linear;
        }

        .circuit-lines {
            position: absolute;
            width: 120%;
            height: 120%;
            top: -10%;
            left: -10%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><g fill="none" stroke="%23FFD700" stroke-width="1.5" stroke-opacity="0.25"><path d="M50,50 L100,50 L100,100 L150,100 L150,150" /><path d="M200,50 L250,50 L250,100 L300,100" /><path d="M350,50 L400,50 L400,100 L450,100 L450,150" /><path d="M50,200 L100,200 L100,250 L150,250 L150,300" /><path d="M250,200 L300,200 L300,250 L350,250" /><path d="M400,200 L450,200 L450,250" /><path d="M50,350 L100,350 L100,400 L150,400 L150,450" /><path d="M200,350 L250,350 L250,400" /><path d="M350,350 L400,350 L400,400 L450,400 L450,450" /></g></svg>');
            opacity: 0.8;
            z-index: 2;
            animation: circuitFlow 30s infinite linear;
        }

        .energy-flow {
            position: absolute;
            width: 150%;
            height: 150%;
            background: radial-gradient(ellipse at center,
                rgba(255, 215, 0, 0.1) 0%,
                rgba(255, 215, 0, 0.05) 30%,
                rgba(218, 165, 32, 0.03) 70%,
                rgba(184, 134, 11, 0.01) 100%);
            opacity: 0.8;
            z-index: 3;
            animation: energyFlowPulse 10s infinite alternate ease-in-out;
        }

        .laser-beams {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><g><line x1="0" y1="100" x2="800" y2="300" stroke="%23FFD700" stroke-width="2" stroke-opacity="0.7" /><line x1="0" y1="200" x2="800" y2="350" stroke="%23FFD700" stroke-width="1.5" stroke-opacity="0.6" /><line x1="0" y1="300" x2="800" y2="400" stroke="%23FFD700" stroke-width="1" stroke-opacity="0.5" /><line x1="0" y1="400" x2="800" y2="450" stroke="%23FFD700" stroke-width="2" stroke-opacity="0.6" /><line x1="0" y1="500" x2="800" y2="250" stroke="%23FFD700" stroke-width="1.5" stroke-opacity="0.7" /></g></svg>');
            z-index: 4;
            filter: blur(2px);
            animation: laserPulse 8s infinite alternate ease-in-out;
        }

        /* 标题样式 */
        .faMing-title-area {
            position: absolute;
            top: 10%;
            left: 10%;
            z-index: 20;
            text-align: left;
        }

        .faMing-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 5vw;
            color: #FFD700;
            margin: 0;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 
                        0 0 30px rgba(255, 255, 255, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 0.5s;
        }

        .faMing-subtitle {
            font-family: 'Segoe UI', sans-serif;
            font-weight: 300;
            font-size: 2vw;
            color: #FAFAD2;
            margin: 0;
            letter-spacing: 5px;
            opacity: 0;
            animation: fadeIn 2s forwards 1s;
        }

        /* 神鸟实体 */
        .faMing-entity {
            position: absolute;
            width: 60vh;
            height: 60vh;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .metallic-body {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="550" viewBox="0 0 400 550"><defs><linearGradient id="gold-metal" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23FFD700" /><stop offset="25%" stop-color="%23B8860B" /><stop offset="50%" stop-color="%23DAA520" /><stop offset="75%" stop-color="%23B8860B" /><stop offset="100%" stop-color="%23FFD700" /></linearGradient><filter id="metal-filter"><feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" /><feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="20" lighting-color="%23FFFFFF" result="specular"><fePointLight x="200" y="100" z="200" /></feSpecularLighting><feComposite in="specular" in2="SourceAlpha" operator="in" result="specular" /><feComposite in="SourceGraphic" in2="specular" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" /></filter></defs><path d="M200,50 Q250,100 300,150 Q350,250 320,350 Q280,450 200,500 Q120,450 80,350 Q50,250 100,150 Q150,100 200,50Z" fill="url(%23gold-metal)" stroke="%23FFD700" stroke-width="2" filter="url(%23metal-filter)" /></svg>') center/contain no-repeat;
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
        }

        .crystal-core {
            position: absolute;
            width: 40%;
            height: 40%;
            top: 30%;
            left: 30%;
            border-radius: 0%;
            background: radial-gradient(
                polygon,
                rgba(255, 255, 255, 0.9),
                rgba(255, 250, 210, 0.7) 40%,
                rgba(255, 223, 0, 0.5) 60%,
                rgba(218, 165, 32, 0.3) 80%,
                transparent 100%
            );
            filter: blur(5px);
            animation: corePulse 3s infinite alternate;
        }

        .sensor-eyes {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="550" viewBox="0 0 400 550"><defs><radialGradient id="eye-glow" cx="0.5" cy="0.5" r="0.4" fx="0.5" fy="0.5"><stop offset="0%" stop-color="%23FFFFFF" /><stop offset="60%" stop-color="%23FFFFF0" /><stop offset="100%" stop-color="%23FFD700" stop-opacity="0" /></radialGradient></defs><circle cx="150" cy="200" r="12" fill="url(%23eye-glow)" /><circle cx="250" cy="200" r="12" fill="url(%23eye-glow)" /></svg>') center/contain no-repeat;
            filter: blur(1px);
            animation: sensorPulse 2s infinite alternate;
        }

        .edge-highlights {
            position: absolute;
            width: 110%;
            height: 110%;
            top: -5%;
            left: -5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="440" height="605" viewBox="0 0 440 605"><path d="M220,55 Q275,110 330,165 Q385,275 352,385 Q308,495 220,550 Q132,495 88,385 Q55,275 110,165 Q165,110 220,55Z" fill="none" stroke="%23FFFFFF" stroke-width="1" stroke-opacity="0.8"/></svg>') center/contain no-repeat;
            filter: blur(3px);
            opacity: 0.7;
            animation: highlightPulse 4s infinite alternate;
        }

        .blade-feathers {
            position: absolute;
            width: 140%;
            height: 140%;
            top: -20%;
            left: -20%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="560" height="770" viewBox="0 0 560 770"><g stroke="%23FFD700" stroke-width="1.5" stroke-opacity="0.7" fill="none"><path d="M220,55 L250,200" /><path d="M220,55 L190,200" /><path d="M330,165 L250,200" /><path d="M110,165 L190,200" /><path d="M352,385 L280,300" /><path d="M88,385 L160,300" /><path d="M220,550 L220,400" /><path d="M280,300 L220,400" /><path d="M160,300 L220,400" /></g></svg>') center/contain no-repeat;
            animation: featherShine 5s infinite linear;
        }

        .faMing-shadow {
            position: absolute;
            width: 80%;
            height: 20%;
            bottom: -10%;
            left: 10%;
            border-radius: 50%;
            background: radial-gradient(
                ellipse at center,
                rgba(255, 215, 0, 0.3),
                rgba(218, 165, 32, 0.1) 60%,
                transparent 80%
            );
            filter: blur(10px);
            transform: rotateX(60deg);
            animation: shadowPulse 4s infinite alternate;
        }

        /* 金色三角碎片粒子系统 */
        .shard-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .shard {
            position: absolute;
            width: 15px;
            height: 15px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><polygon points="7.5,0 15,15 0,15" fill="%23FFD700" stroke="%23FFFFFF" stroke-width="0.5" /></svg>') center/contain no-repeat;
            opacity: 0.8;
            filter: drop-shadow(0 0 3px #FFD700);
            animation: shardFloat 8s infinite linear;
        }

        /* 技术芯片标签特殊样式 */
        .faMing-chips {
            position: absolute;
            bottom: 10%;
            right: 5%;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 50;
        }

        .faMing-chip {
            padding: 8px 16px;
            border-radius: 0px;
            background: linear-gradient(135deg, rgba(101, 67, 33, 0.8), rgba(84, 68, 18, 0.8));
            border: 1px solid rgba(255, 215, 0, 0.6);
            color: black;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
            animation: chipGlow 3s infinite alternate;
            opacity: 0;
            transform: translateX(50px);
        }

        .faMing-chip:nth-child(1) {
            animation-delay: 1.5s;
        }

        .faMing-chip:nth-child(2) {
            animation-delay: 2s;
        }

        .faMing-chip:nth-child(3) {
            animation-delay: 2.5s;
        }

        .faMing-desc {
            position: absolute;
            bottom: 15%;
            left: 10%;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 2vw;
            color: rgba(255, 255, 255, 0.7);
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 2s;
        }

        /* 发明特有动画 */
        @keyframes gridPulse {
            0% { transform: perspective(500px) rotateX(60deg) scale(3) translateY(0); opacity: 0.3; }
            50% { opacity: 0.5; }
            100% { transform: perspective(500px) rotateX(60deg) scale(3) translateY(-5%); opacity: 0.3; }
        }

        @keyframes circuitFlow {
            0% { background-position: 0 0; }
            100% { background-position: 100px 100px; }
        }

        @keyframes energyFlowPulse {
            0% { transform: translateX(0) translateY(0) scale(1); opacity: 0.6; }
            100% { transform: translateX(-2%) translateY(-2%) scale(1.05); opacity: 0.8; }
        }

        @keyframes laserPulse {
            0% { opacity: 0.4; filter: blur(2px); }
            100% { opacity: 0.7; filter: blur(3px); }
        }

        @keyframes corePulse {
            0% { opacity: 0.7; filter: blur(5px); }
            100% { opacity: 1; filter: blur(8px); }
        }

        @keyframes sensorPulse {
            0% { opacity: 0.8; filter: blur(1px); }
            100% { opacity: 1; filter: blur(2px); }
        }

        @keyframes highlightPulse {
            0% { opacity: 0.5; }
            100% { opacity: 0.9; }
        }

        @keyframes featherShine {
            0% { opacity: 0.5; transform: rotate(0deg); }
            50% { opacity: 0.9; }
            100% { opacity: 0.5; transform: rotate(360deg); }
        }

        @keyframes shadowPulse {
            0% { opacity: 0.4; transform: rotateX(60deg) scale(0.9); }
            100% { opacity: 0.7; transform: rotateX(60deg) scale(1.1); }
        }

        @keyframes shardFloat {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(30px, 30px) rotate(360deg); }
        }

        @keyframes chipGlow {
            0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.7); border-color: rgba(255, 215, 0, 0.5); }
            100% { box-shadow: 0 0 15px rgba(255, 215, 0, 1); border-color: rgba(255, 215, 0, 0.8); }
        }

        @keyframes floatBody {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

        @keyframes patternPulse {
            0% { opacity: 0.2; }
            100% { opacity: 0.5; }
        }

        @keyframes firePulse {
            0% { opacity: 0.6; filter: blur(2px); }
            100% { opacity: 1; filter: blur(3px); }
        }

        @keyframes glowPulse {
            0% { opacity: 0.4; filter: blur(5px); }
            100% { opacity: 0.7; filter: blur(7px); }
        }

        @keyframes featherFall {
            0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0.9; }
            100% { transform: translateY(100px) translateX(30px) rotate(180deg); opacity: 0; }
        }

        .cloud-sea {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60%;
            background: linear-gradient(to top, 
                rgba(11, 30, 62, 0.8) 0%, 
                rgba(17, 35, 65, 0.4) 60%, 
                rgba(25, 41, 77, 0.1) 100%);
            z-index: 2;
            transform: translateZ(-100px);
            animation: cloudMove 20s infinite alternate ease-in-out;
        }

        .tyndall-light {
            position: absolute;
            top: -10%;
            left: 30%;
            width: 15%;
            height: 120%;
            background: linear-gradient(90deg, 
                rgba(255,255,255,0) 0%, 
                rgba(255,255,255,0.1) 50%, 
                rgba(255,255,255,0) 100%);
            transform: rotate(45deg);
            z-index: 3;
            animation: lightMove 8s infinite ease;
        }

        .tyndall-light-2 {
            left: 50%;
            width: 10%;
            animation-delay: 3s;
            animation-duration: 12s;
            opacity: 0.6;
        }

        .tyndall-light-3 {
            left: 10%;
            width: 8%;
            animation-delay: 5s;
            animation-duration: 15s;
            opacity: 0.3;
        }

        /* 标题样式 */
        .jiaoMing-title-area {
            position: absolute;
            top: 10%;
            left: 10%;
            z-index: 20;
            text-align: left;
        }

        .jiaoMing-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 5vw;
            color: #E3F2FD;
            margin: 0;
            text-shadow: 0 0 15px rgba(179, 229, 252, 0.8), 
                        0 0 30px rgba(179, 229, 252, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 0.5s;
        }

        .jiaoMing-subtitle {
            font-family: 'Segoe UI', sans-serif;
            font-weight: 300;
            font-size: 2vw;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
            letter-spacing: 5px;
            opacity: 0;
            animation: fadeIn 2s forwards 1s;
        }

        /* 神鸟实体 */
        .jiaoMing-entity {
            position: absolute;
            width: 60vh;
            height: 60vh;
            top: 55%;
            left: 60%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .crystal-body {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><path d="M200,50 Q150,150 100,200 Q50,300 80,400 Q120,500 200,550 Q280,500 320,400 Q350,300 300,200 Q250,150 200,50Z" fill="%23E3F2FD" stroke="%23E3F2FD" stroke-width="1" opacity="0.3"/></svg>') center/contain no-repeat;
            filter: drop-shadow(0 0 20px rgba(179, 229, 252, 0.5));
        }

        .crystal-core {
            position: absolute;
            width: 70%;
            height: 70%;
            top: 15%;
            left: 15%;
            border-radius: 50%;
            background: radial-gradient(
                circle at 30% 30%,
                rgba(255, 255, 255, 0.9),
                rgba(179, 229, 252, 0.6) 40%,
                rgba(129, 212, 250, 0.3) 60%,
                rgba(79, 195, 247, 0.1) 80%,
                transparent 100%
            );
            filter: blur(5px);
            animation: pulseCore 4s infinite alternate;
        }

        .crystal-aura {
            position: absolute;
            width: 120%;
            height: 120%;
            top: -10%;
            left: -10%;
            border-radius: 50%;
            background: radial-gradient(
                circle at center,
                rgba(255, 255, 255, 0.3),
                rgba(227, 242, 253, 0.2) 30%,
                rgba(187, 222, 251, 0.1) 60%,
                transparent 80%
            );
            filter: blur(30px);
            animation: pulseAura 6s infinite alternate;
        }

        .energy-pulse {
            position: absolute;
            width: 110%;
            height: 110%;
            top: -5%;
            left: -5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><path d="M200,50 Q150,150 100,200 Q50,300 80,400 Q120,500 200,550 Q280,500 320,400 Q350,300 300,200 Q250,150 200,50Z" fill="none" stroke="%23FFFFFF" stroke-width="3" opacity="0.5"/></svg>') center/contain no-repeat;
            opacity: 0;
            animation: energyPulse 3s infinite;
        }

        .jiaoMing-shadow {
            position: absolute;
            width: 90%;
            height: 30%;
            bottom: -15%;
            left: 20%;
            border-radius: 50%;
            background: radial-gradient(
                ellipse at center,
                rgba(25, 118, 210, 0.3),
                rgba(13, 71, 161, 0.1) 60%,
                transparent 80%
            );
            filter: blur(10px);
            transform: rotateX(60deg) skewX(20deg);
        }

        /* 粒子系统 */
        .particle-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #E3F2FD;
            border-radius: 50%;
            box-shadow: 0 0 5px #E3F2FD, 0 0 10px #E3F2FD;
            opacity: 0;
        }

        .p1, .p2, .p3, .p4, .p5 {
            bottom: 30%;
            right: 10%;
        }

        .p6, .p7, .p8, .p9, .p10 {
            bottom: 40%;
            right: 5%;
        }

        .p11, .p12, .p13, .p14, .p15 {
            bottom: 20%;
            right: 15%;
        }

        /* 技术标签 */
        .tech-chips {
            position: absolute;
            bottom: 10%;
            right: 5%;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 50;
        }

        .tech-chip {
            padding: 8px 16px;
            border-radius: 30px;
            background: rgba(25, 118, 210, 0.2);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(179, 229, 252, 0.3);
            color: white;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            box-shadow: 0 0 10px rgba(179, 229, 252, 0.5);
            animation: chipPulse 3s infinite alternate;
            opacity: 0;
            transform: translateX(50px);
        }

        .tech-chip:nth-child(1) {
            animation-delay: 1.5s;
        }

        .tech-chip:nth-child(2) {
            animation-delay: 2s;
        }

        .tech-chip:nth-child(3) {
            animation-delay: 2.5s;
        }

        .jiaoMing-desc {
            position: absolute;
            bottom: 15%;
            left: 10%;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 2vw;
            color: rgba(255, 255, 255, 0.7);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
            opacity: 0;
            animation: fadeIn 2s forwards 2s;
        }

        /* 涅槃凤凰特殊样式 */
        .niePan-section {
            perspective: 1000px;
            background: linear-gradient(to bottom, #1a0800, #4a1500);
            overflow: hidden;
        }

        .niePan-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .flame-aura {
            position: absolute;
            width: 150%;
            height: 150%;
            top: -25%;
            left: -25%;
            background: radial-gradient(ellipse at center,
                rgba(255, 69, 0, 0.2) 0%,
                rgba(255, 99, 71, 0.15) 30%,
                rgba(178, 34, 34, 0.1) 60%,
                rgba(139, 0, 0, 0.05) 100%);
            opacity: 0.8;
            z-index: 1;
            animation: flameAuraPulse 10s infinite alternate ease-in-out;
        }

        .ember-field {
            position: absolute;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><g fill="%23FF6000" fill-opacity="0.5"><circle cx="20" cy="30" r="1" /><circle cx="40" cy="80" r="1.5" /><circle cx="60" cy="10" r="1" /><circle cx="80" cy="40" r="1.5" /><circle cx="100" cy="70" r="1" /><circle cx="120" cy="20" r="1.5" /><circle cx="140" cy="50" r="1" /><circle cx="160" cy="30" r="1.5" /><circle cx="180" cy="60" r="1" /><circle cx="10" cy="90" r="1.5" /><circle cx="30" cy="120" r="1" /><circle cx="50" cy="150" r="1.5" /><circle cx="70" cy="180" r="1" /><circle cx="90" cy="140" r="1.5" /><circle cx="110" cy="170" r="1" /><circle cx="130" cy="130" r="1.5" /><circle cx="150" cy="160" r="1" /><circle cx="170" cy="190" r="1.5" /><circle cx="190" cy="110" r="1" /></g></svg>');
            opacity: 0.6;
            z-index: 2;
            animation: emberFieldMove 30s infinite linear;
        }

        .rainbow-glow {
            position: absolute;
            width: 140%;
            height: 140%;
            top: -20%;
            left: -20%;
            background: 
                radial-gradient(circle at 30% 40%, 
                    rgba(148, 0, 211, 0.1) 0%,
                    rgba(75, 0, 130, 0.08) 20%,
                    rgba(0, 0, 255, 0.06) 40%,
                    rgba(0, 255, 255, 0.04) 60%,
                    rgba(255, 165, 0, 0.02) 80%,
                    transparent 100%),
                radial-gradient(circle at 70% 60%, 
                    rgba(255, 0, 0, 0.1) 0%,
                    rgba(255, 127, 0, 0.08) 20%,
                    rgba(255, 255, 0, 0.06) 40%,
                    rgba(0, 255, 0, 0.04) 60%,
                    rgba(75, 0, 130, 0.02) 80%,
                    transparent 100%);
            opacity: 0.7;
            z-index: 3;
            filter: blur(15px);
            animation: rainbowPulse 15s infinite alternate ease-in-out;
        }

        /* 标题样式 */
        .niePan-title-area {
            position: absolute;
            top: 10%;
            left: 10%;
            z-index: 20;
            text-align: left;
        }

        .niePan-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 5vw;
            color: #FFD700;
            margin: 0;
            text-shadow: 0 0 15px rgba(255, 165, 0, 0.8), 
                         0 0 30px rgba(255, 69, 0, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 0.5s;
        }

        .niePan-subtitle {
            font-family: 'Segoe UI', sans-serif;
            font-weight: 300;
            font-size: 2vw;
            color: #FFA07A;
            margin: 0;
            letter-spacing: 5px;
            opacity: 0;
            animation: fadeIn 2s forwards 1s;
        }

        /* 神鸟实体 */
        .niePan-entity {
            position: absolute;
            width: 70vh;
            height: 70vh;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .phoenix-body {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .base-wings {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="450" viewBox="0 0 400 450"><defs><radialGradient id="wing-gradient" cx="0.5" cy="0.5" r="0.5"><stop offset="0%" stop-color="%23FFD700" /><stop offset="70%" stop-color="%23FF6000" /><stop offset="100%" stop-color="%23FF4500" /></radialGradient></defs><path d="M200,50 Q250,100 300,150 Q350,250 320,350 Q280,450 200,500 Q120,450 80,350 Q50,250 100,150 Q150,100 200,50Z" fill="url(%23wing-gradient)" stroke="%23FFD700" stroke-width="0" /></svg>') center/contain no-repeat;
            filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.7));
            animation: wingsFloat 5s infinite alternate ease-in-out;
        }

        .rainbow-layer {
            position: absolute;
            width: 90%;
            height: 90%;
            top: 5%;
            left: 5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="405" viewBox="0 0 400 450"><defs><linearGradient id="rainbow-gradient" x1="0" y1="0" x2="1" y2="1" gradientTransform="rotate(30)"><stop offset="0%" stop-color="%23FF0080" stop-opacity="0.6" /><stop offset="50%" stop-color="%23FFA500" stop-opacity="0.6" /><stop offset="100%" stop-color="%23FFE400" stop-opacity="0.6" /></linearGradient></defs><path d="M200,50 Q250,100 300,150 Q350,250 320,350 Q280,450 200,500 Q120,450 80,350 Q50,250 100,150 Q150,100 200,50Z" fill="url(%23rainbow-gradient)" stroke="none" /></svg>') center/contain no-repeat;
            opacity: 0.7;
            animation: rainbowLayerPulse 3s infinite alternate;
        }

        .energy-glow {
            position: absolute;
            width: 120%;
            height: 120%;
            top: -10%;
            left: -10%;
            border-radius: 50%;
            background: radial-gradient(
                circle at center,
                rgba(255, 255, 255, 0.3),
                rgba(255, 255, 0, 0.2) 30%,
                rgba(255, 165, 0, 0.1) 60%,
                transparent 80%
            );
            filter: blur(20px);
            animation: energyGlowPulse 4s infinite alternate;
        }

        .eye-sparkles {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="450" viewBox="0 0 400 450"><defs><radialGradient id="eye-glow" cx="0.5" cy="0.5" r="0.4" fx="0.5" fy="0.5"><stop offset="0%" stop-color="%23FFFFFF" /><stop offset="60%" stop-color="%236E44FF" /><stop offset="100%" stop-color="%23000000" stop-opacity="0" /></radialGradient></defs><circle cx="150" cy="175" r="8" fill="url(%23eye-glow)" /><circle cx="250" cy="175" r="8" fill="url(%23eye-glow)" /></svg>') center/contain no-repeat;
            filter: blur(1px);
            animation: eyeSparkle 2s infinite alternate;
        }

        .beak-highlight {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="450" viewBox="0 0 400 450"><path d="M200,210 L190,230 L210,230 Z" fill="%23FFFFFF" fill-opacity="0.9" /></svg>') center/contain no-repeat;
            animation: beakHighlightPulse 1.5s infinite alternate;
        }

        .edge-flow {
            position: absolute;
            width: 110%;
            height: 110%;
            top: -5%;
            left: -5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="440" height="495" viewBox="0 0 400 450"><path d="M200,50 Q250,100 300,150 Q350,250 320,350 Q280,450 200,500 Q120,450 80,350 Q50,250 100,150 Q150,100 200,50Z" fill="none" stroke="%23FFC832" stroke-width="3" stroke-opacity="0.8"/></svg>') center/contain no-repeat;
            filter: blur(2px);
            opacity: 0.8;
            animation: edgeFlowPulse 3s infinite linear;
        }

        /* 光尘粒子系统 */
        .particle-flow {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .light-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            opacity: 0.6;
            box-shadow: 0 0 5px currentColor;
            animation: particleFloat 3s infinite alternate ease-in-out;
        }

        /* 尾羽拖尾效果 */
        .tail-stream {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .trail-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 8px currentColor;
            opacity: 0.6;
            animation: trailBlink 0.5s infinite alternate;
        }

        /* 涅槃标语 */
        .niePan-desc {
            position: absolute;
            bottom: 15px;
            right: 20px;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 2vw;
            background: linear-gradient(to bottom, #FFD700, #FFA500);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 2s;
        }

        /* 涅槃特有动画 */
        @keyframes flameAuraPulse {
            0% { transform: translateX(0) translateY(0) scale(1); opacity: 0.6; }
            100% { transform: translateX(-2%) translateY(-2%) scale(1.05); opacity: 0.8; }
        }

        @keyframes emberFieldMove {
            0% { transform: translateX(0) translateY(0); }
            100% { transform: translateX(-50px) translateY(-30px); }
        }

        @keyframes rainbowPulse {
            0% { opacity: 0.5; filter: blur(15px); }
            100% { opacity: 0.8; filter: blur(20px); }
        }

        @keyframes wingsFloat {
            0% { transform: scale(1); }
            100% { transform: scale(1.03); }
        }
        
        /* 鹔鹴 - 朔风之痕特效样式 */
        .huFeng-section {
            perspective: 1000px;
            background: linear-gradient(to bottom, #0a1a2c, #142940);
            overflow: hidden;
        }

        .huFeng-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .frost-mist {
            position: absolute;
            width: 150%;
            height: 150%;
            background: radial-gradient(ellipse at center,
                rgba(150, 200, 255, 0.05) 0%,
                rgba(100, 150, 200, 0.1) 30%,
                rgba(50, 100, 150, 0.15) 70%,
                rgba(20, 40, 80, 0.2) 100%);
            opacity: 0.8;
            z-index: 1;
            animation: frostMistMove 30s infinite alternate ease-in-out;
        }

        .ice-crystal-field {
            position: absolute;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><g fill="none" stroke="%2380C0FF" stroke-width="0.5" stroke-opacity="0.3"><path d="M50,50 L60,40 M50,50 L60,60 M50,50 L40,60 M50,50 L40,40" /><path d="M100,100 L110,90 M100,100 L110,110 M100,100 L90,110 M100,100 L90,90" /><path d="M150,50 L160,40 M150,50 L160,60 M150,50 L140,60 M150,50 L140,40" /><path d="M50,150 L60,140 M50,150 L60,160 M50,150 L40,160 M50,150 L40,140" /><path d="M200,200 L210,190 M200,200 L210,210 M200,200 L190,210 M200,200 L190,190" /><path d="M250,100 L260,90 M250,100 L260,110 M250,100 L240,110 M250,100 L240,90" /></g></svg>');
            opacity: 0.6;
            z-index: 2;
            animation: iceCrystalMove 60s infinite linear;
        }

        .giant-snowflake {
            position: absolute;
            width: 120%;
            height: 120%;
            top: -10%;
            left: -10%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><g fill="none" stroke="%23A0D0FF" stroke-width="1" stroke-opacity="0.2"><path d="M400,100 L400,700" /><path d="M400,100 L350,150 M400,100 L450,150" /><path d="M400,700 L350,650 M400,700 L450,650" /><path d="M200,200 L600,600" /><path d="M200,200 L200,250 M200,200 L250,200" /><path d="M600,600 L550,600 M600,600 L600,550" /><path d="M200,600 L600,200" /><path d="M200,600 L250,600 M200,600 L200,550" /><path d="M600,200 L550,200 M600,200 L600,250" /></g></svg>') center/contain no-repeat;
            opacity: 0.7;
            z-index: 3;
            filter: blur(2px);
            animation: giantSnowflakeRotate 80s infinite linear;
        }

        .cold-radiance {
            position: absolute;
            top: -20%;
            left: 30%;
            width: 40%;
            height: 150%;
            background: conic-gradient(
                from 270deg at 50% 0%,
                rgba(100, 150, 255, 0) 0deg,
                rgba(120, 180, 255, 0.05) 45deg,
                rgba(140, 210, 255, 0.1) 90deg,
                rgba(140, 210, 255, 0.1) 270deg,
                rgba(120, 180, 255, 0.05) 315deg,
                rgba(100, 150, 255, 0) 360deg
            );
            z-index: 4;
            filter: blur(10px);
            animation: radiancePulse 8s infinite alternate ease-in-out;
        }

        /* 标题样式 */
        .huFeng-title-area {
            position: absolute;
            top: 10%;
            left: 10%;
            z-index: 20;
            text-align: left;
        }

        .huFeng-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 5vw;
            color: #A0D0FF;
            margin: 0;
            text-shadow: 0 0 15px rgba(140, 210, 255, 0.8), 
                        0 0 30px rgba(140, 210, 255, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 0.5s;
        }

        .huFeng-subtitle {
            font-family: 'Segoe UI', sans-serif;
            font-weight: 300;
            font-size: 2vw;
            color: #E0F0FF;
            margin: 0;
            letter-spacing: 5px;
            opacity: 0;
            animation: fadeIn 2s forwards 1s;
        }

        /* 神鸟实体 */
        .huFeng-entity {
            position: absolute;
            width: 60vh;
            height: 60vh;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .frost-body {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><defs><filter id="frost-filter"><feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" /><feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="20" lighting-color="%23E0F0FF" result="specular"><fePointLight x="200" y="100" z="150" /></feSpecularLighting><feComposite in="specular" in2="SourceAlpha" operator="in" result="specular" /><feComposite in="SourceGraphic" in2="specular" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" /></filter></defs><path d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z" fill="%230a1a2c" stroke="%2380C0FF" stroke-width="1" filter="url(%23frost-filter)" /></svg>') center/contain no-repeat;
            filter: drop-shadow(0 0 15px rgba(160, 200, 255, 0.5));
            animation: frostBodyFloat 4s infinite alternate ease-in-out;
        }

        .ice-patterns {
            position: absolute;
            width: 90%;
            height: 90%;
            top: 5%;
            left: 5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="450" viewBox="0 0 400 500"><g fill="none" stroke="%2380C0FF" stroke-width="0.8" stroke-opacity="0.6" stroke-dasharray="1,8"><path d="M200,100 L200,250" /><path d="M150,150 L250,150" /><path d="M150,200 L250,200" /><path d="M150,250 L250,250" /><path d="M150,300 L250,300" /><path d="M175,125 L225,125" /><path d="M175,175 L225,175" /><path d="M175,225 L225,225" /><path d="M175,275 L225,275" /><path d="M125,200 L150,225 L125,250" /><path d="M275,200 L250,225 L275,250" /></g></svg>') center/contain no-repeat;
            opacity: 0.7;
            animation: icePatternsShimmer 4s infinite alternate;
        }

        .crystal-eyes {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500"><defs><radialGradient id="eye-glow" cx="0.5" cy="0.5" r="0.4" fx="0.5" fy="0.5"><stop offset="0%" stop-color="%23FFFFFF" /><stop offset="60%" stop-color="%2380C0FF" /><stop offset="100%" stop-color="%233080C0" stop-opacity="0" /></radialGradient></defs><circle cx="150" cy="180" r="10" fill="url(%23eye-glow)" /><circle cx="250" cy="180" r="10" fill="url(%23eye-glow)" /></svg>') center/contain no-repeat;
            filter: blur(1px);
            animation: crystalEyesGlow 2s infinite alternate;
        }

        .frost-edge-glow {
            position: absolute;
            width: 110%;
            height: 110%;
            top: -5%;
            left: -5%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="440" height="550" viewBox="0 0 400 500"><path d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z" fill="none" stroke="%23A0D0FF" stroke-width="3" stroke-opacity="0.3"/></svg>') center/contain no-repeat;
            filter: blur(5px);
            opacity: 0.6;
            animation: edgeGlowPulse 4s infinite alternate;
        }

        /* 冰晶粒子拖尾系统 */
        .ice-trail-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .ice-trail {
            position: absolute;
            width: 6px;
            height: 6px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><polygon points="3,0 6,3 3,6 0,3" fill="%23E0F0FF" stroke="%2380C0FF" stroke-width="0.5" /></svg>') center/contain no-repeat;
            opacity: 0;
            filter: drop-shadow(0 0 2px #80C0FF);
        }

        /* 环绕冰旋风粒子场 */
        .frost-vortex-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .frost-vortex {
            position: absolute;
            width: 120%;
            height: 120%;
            top: -10%;
            left: -10%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"><defs><linearGradient id="vortex-gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23E0F0FF" stop-opacity="0.8" /><stop offset="100%" stop-color="%2380C0FF" stop-opacity="0" /></linearGradient></defs><path d="M240,100 C340,140 360,240 320,340 C280,440 180,460 80,420 C-20,380 -40,280 0,180 C40,80 140,60 240,100 Z" fill="none" stroke="url(%23vortex-gradient)" stroke-width="1" /></svg>') center/contain no-repeat;
            opacity: 0.4;
            animation: vortexSpin 8s infinite linear;
        }

        .huFeng-shadow {
            position: absolute;
            width: 80%;
            height: 20%;
            bottom: -5%;
            left: 10%;
            border-radius: 50%;
            background: radial-gradient(
                ellipse at center,
                rgba(100, 150, 200, 0.3),
                rgba(60, 100, 150, 0.1) 60%,
                transparent 80%
            );
            filter: blur(10px);
            transform: rotateX(60deg);
        }

        /* 雪花前景层 */
        .snowflake-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 15;
        }

        /* 四角霜冻效果 */
        .corner-frost {
            position: absolute;
            width: 25%;
            height: 25%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250"><g fill="none" stroke="%23E0F0FF" stroke-width="1.5" stroke-opacity="0.5"><path d="M0,0 L50,0 M0,0 L0,50" /><path d="M20,0 L20,20 M0,20 L20,20" /><path d="M40,0 L40,40 M0,40 L40,40" /></g></svg>') no-repeat;
            filter: blur(1px);
            opacity: 0.7;
        }

        .top-left {
            top: 0;
            left: 0;
            transform: rotate(0deg);
        }

        .top-right {
            top: 0;
            right: 0;
            transform: rotate(90deg);
        }

        .bottom-left {
            bottom: 0;
            left: 0;
            transform: rotate(270deg);
        }

        .bottom-right {
            bottom: 0;
            right: 0;
            transform: rotate(180deg);
        }

        /* 技术信息框 */
        .tech-info-container {
            position: absolute;
            bottom: 8%;
            right: 5%;
            z-index: 50;
        }

        .tech-info-box {
            padding: 15px 20px;
            border-radius: 10px;
            background: rgba(20, 40, 60, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(140, 210, 255, 0.5);
            box-shadow: 0 0 15px rgba(140, 210, 255, 0.3);
            transition: all 0.3s ease;
        }

        .tech-info-box:hover {
            background: rgba(30, 60, 90, 0.7);
            box-shadow: 0 0 20px rgba(140, 210, 255, 0.5);
        }

        .tech-info-item {
            color: white;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            margin: 5px 0;
        }

        .huFeng-desc {
            position: absolute;
            bottom: 15%;
            left: 10%;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 2vw;
            color: rgba(255, 255, 255, 0.7);
            text-shadow: 0 0 10px rgba(140, 210, 255, 0.5);
            opacity: 0;
            animation: fadeIn 2s forwards 2s;
        }

        /* 鹔鹴特有动画 */
        @keyframes frostMistMove {
            0% { transform: translateX(0) translateY(0); opacity: 0.6; }
            100% { transform: translateX(-5%) translateY(-5%); opacity: 0.8; }
        }

        @keyframes iceCrystalMove {
            0% { transform: translateX(0) rotate(0deg); }
            100% { transform: translateX(-50%) rotate(-5deg); }
        }

        @keyframes giantSnowflakeRotate {
            0% { transform: rotate(0deg) scale(1); opacity: 0.5; }
            50% { transform: rotate(180deg) scale(1.05); opacity: 0.7; }
            100% { transform: rotate(360deg) scale(1); opacity: 0.5; }
        }

        @keyframes radiancePulse {
            0% { opacity: 0.5; transform: translateY(0) scale(1); }
            100% { opacity: 0.7; transform: translateY(2%) scale(1.05); }
        }

        @keyframes frostBodyFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-8px); }
        }

        @keyframes icePatternsShimmer {
            0% { opacity: 0.5; }
            100% { opacity: 0.9; }
        }

        @keyframes crystalEyesGlow {
            0% { opacity: 0.7; filter: blur(1px); }
            100% { opacity: 1; filter: blur(2px); }
        }

        @keyframes edgeGlowPulse {
            0% { opacity: 0.4; filter: blur(5px); }
            100% { opacity: 0.7; filter: blur(7px); }
        }

        @keyframes vortexSpin {
            0% { transform: rotate(0deg) scale(1); opacity: 0.3; }
            50% { opacity: 0.5; }
            100% { transform: rotate(360deg) scale(1.05); opacity: 0.3; }
        }

        @keyframes rainbowLayerPulse {
            0% { opacity: 0.5; }
            100% { opacity: 0.8; }
        }

        @keyframes energyGlowPulse {
            0% { opacity: 0.6; transform: scale(0.95); }
            100% { opacity: 0.9; transform: scale(1.05); }
        }

        @keyframes eyeSparkle {
            0% { opacity: 0.7; filter: blur(1px); }
            100% { opacity: 1; filter: blur(2px); }
        }

        @keyframes beakHighlightPulse {
            0% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        @keyframes edgeFlowPulse {
            0% { opacity: 0.7; transform: rotate(0deg); }
            100% { opacity: 1; transform: rotate(360deg); }
        }

        @keyframes particleFloat {
            0% { transform: translateY(0) translateX(0); }
            100% { transform: translateY(-5px) translateX(5px); }
        }

        @keyframes trailBlink {
            0% { opacity: 0.6; }
            100% { opacity: 1; }
        }

        /* 动画效果 */
        @keyframes cloudMove {
            0% { transform: translateZ(-100px) translateX(0); }
            100% { transform: translateZ(-100px) translateX(-5%); }
        }

        @keyframes lightMove {
            0% { transform: rotate(45deg) translateY(0); opacity: 0; }
            50% { opacity: 0.3; }
            100% { transform: rotate(45deg) translateY(10%); opacity: 0; }
        }

        @keyframes pulseCore {
            0% { opacity: 0.7; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1.05); }
        }

        @keyframes pulseAura {
            0% { opacity: 0.5; transform: scale(0.9); }
            100% { opacity: 0.8; transform: scale(1.1); }
        }

        @keyframes energyPulse {
            0% { opacity: 0; transform: scale(1); }
            50% { opacity: 0.8; }
            100% { opacity: 0; transform: scale(1.2); }
        }

        @keyframes particleRise {
            0% { transform: translateY(0) translateX(0); opacity: 0.8; }
            100% { transform: translateY(-100px) translateX(-30px); opacity: 0; }
        }

        @keyframes chipPulse {
            0% { box-shadow: 0 0 5px rgba(179, 229, 252, 0.5); opacity: 0.7; transform: translateX(0); }
            100% { box-shadow: 0 0 15px rgba(179, 229, 252, 0.8); opacity: 1; transform: translateX(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 特效类 */
        .white-glow {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
        }
        
        .gold-glow {
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
        }
        
        .red-glow {
            text-shadow: 0 0 5px rgba(255, 69, 0, 0.5);
        }
        
        /* 集体之力展区 - 五神融合 */
        .collective-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: #050510;
            perspective: 1000px;
        }
        
        /* 能量漩涡背景 */
        .energy-vortex-container {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            z-index: 1;
            transform-style: preserve-3d;
            animation: slowSpin 60s linear infinite;
        }
        
        .vortex-ring {
            position: absolute;
            border-radius: 50%;
            border: 4px solid transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.7;
            filter: blur(3px);
        }
        
        .vortex-ring-1 {
            width: 100vh;
            height: 100vh;
            border-image: linear-gradient(45deg, #E3F2FD, #8A2BE2, #FFD700, #FF5722, #80C0FF) 1;
            animation: rotateRing 12s linear infinite, pulseSize 8s ease infinite;
        }
        
        .vortex-ring-2 {
            width: 140vh;
            height: 140vh;
            border-image: linear-gradient(120deg, #80C0FF, #E3F2FD, #8A2BE2, #FFD700, #FF5722) 1;
            animation: rotateRing 18s linear infinite reverse, pulseSize 12s ease infinite;
        }
        
        .vortex-ring-3 {
            width: 180vh;
            height: 180vh;
            border-image: linear-gradient(240deg, #FF5722, #80C0FF, #E3F2FD, #8A2BE2, #FFD700) 1;
            animation: rotateRing 24s linear infinite, pulseSize 16s ease infinite;
        }
        
        .vortex-distortion {
            position: absolute;
            width: 150%;
            height: 150%;
            top: -25%;
            left: -25%;
            background: radial-gradient(
                ellipse at center,
                rgba(255, 255, 255, 0.03) 0%,
                rgba(100, 100, 150, 0.02) 40%,
                rgba(50, 50, 100, 0.01) 60%,
                rgba(0, 0, 0, 0) 100%
            );
            filter: blur(15px);
            transform: rotate(0deg);
            animation: distortionRotate 20s linear infinite;
        }
        
        .energy-lightning {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><defs><filter id="glow"><feGaussianBlur stdDeviation="3.5" result="blur"/><feFlood flood-color="%23FFFFFF" result="color"/><feComposite in="color" in2="blur" operator="in"/><feComposite in2="SourceGraphic" operator="over"/></filter></defs><g filter="url(%23glow)" opacity="0.7"><path d="M400,100 L450,300 L600,320 L500,400 L550,600 L400,500 L250,600 L300,400 L200,320 L350,300 Z" fill="none" stroke="%23FFFFFF" stroke-width="1.5" stroke-opacity="0.7" /></g></svg>') center/contain no-repeat;
            opacity: 0.2;
            animation: lightningFlash 8s infinite;
        }
        
        /* 神圣图腾中心区域 */
        .sacred-totem {
            width: 70vh;
            height: 70vh;
            max-width: 900px;
            max-height: 900px;
            border-radius: 50%;
            background: rgba(10, 15, 30, 0.6);
            border: 3px solid;
            border-image: linear-gradient(
                45deg,
                rgba(227, 242, 253, 0.8),  /* 鹪明 - 白/淡蓝 */
                rgba(138, 43, 226, 0.8),   /* 幽昌 - 紫色 */
                rgba(255, 215, 0, 0.8),    /* 发明 - 金色 */
                rgba(255, 87, 34, 0.8),    /* 涅槃 - 红色 */
                rgba(128, 192, 255, 0.8)   /* 鹔鹴 - 蓝色 */
            ) 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
            animation: totemPulse 4s ease-in-out infinite, slowRotate 60s linear infinite;
            transform-style: preserve-3d;
        }
        
        /* 中央能量核心 */
        .energy-core {
            width: 25vh;
            height: 25vh;
            border-radius: 50%;
            background: radial-gradient(
                circle,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(227, 242, 253, 0.7) 10%,  /* 鹪明 - 白/淡蓝 */
                rgba(138, 43, 226, 0.7) 30%,   /* 幽昌 - 紫色 */
                rgba(255, 215, 0, 0.7) 50%,    /* 发明 - 金色 */
                rgba(255, 87, 34, 0.7) 70%,    /* 涅槃 - 红色 */
                rgba(128, 192, 255, 0.7) 90%,  /* 鹔鹴 - 蓝色 */
                rgba(0, 0, 0, 0.5) 100%
            );
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.8),
                        0 0 80px rgba(255, 215, 0, 0.6),
                        0 0 120px rgba(138, 43, 226, 0.4);
            position: relative;
            z-index: 15;
            animation: corePulse 2s ease-in-out infinite alternate, coreRotate 8s linear infinite;
        }
        
        .core-pulse {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 50%;
            background: transparent;
            box-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
            animation: corePulseExpand 2s ease-in-out infinite;
        }
        
        .core-rays {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><defs><linearGradient id="ray-gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23FFFFFF" stop-opacity="0.9"/><stop offset="100%" stop-color="%23FFFFFF" stop-opacity="0"/></linearGradient></defs><g><line x1="300" y1="0" x2="300" y2="600" stroke="url(%23ray-gradient)" stroke-width="3" /><line x1="0" y1="300" x2="600" y2="300" stroke="url(%23ray-gradient)" stroke-width="3" /><line x1="0" y1="0" x2="600" y2="600" stroke="url(%23ray-gradient)" stroke-width="3" /><line x1="600" y1="0" x2="0" y2="600" stroke="url(%23ray-gradient)" stroke-width="3" /><line x1="150" y1="0" x2="450" y2="600" stroke="url(%23ray-gradient)" stroke-width="2" /><line x1="0" y1="150" x2="600" y2="450" stroke="url(%23ray-gradient)" stroke-width="2" /><line x1="450" y1="0" x2="150" y2="600" stroke="url(%23ray-gradient)" stroke-width="2" /><line x1="0" y1="450" x2="600" y2="150" stroke="url(%23ray-gradient)" stroke-width="2" /></g></svg>') center/contain no-repeat;
            opacity: 0.6;
            animation: raysSpin 20s linear infinite;
        }
        
        .core-flare {
            position: absolute;
            width: 300%;
            height: 300%;
            top: -100%;
            left: -100%;
            background: radial-gradient(
                circle,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(255, 255, 255, 0.4) 20%,
                rgba(255, 255, 255, 0) 40%
            );
            filter: blur(20px);
            opacity: 0.2;
            mix-blend-mode: screen;
            animation: flareFlash 4s infinite alternate;
        }
        
        /* 五神鸟碎片 */
        .bird-fragments-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 5;
        }
        
        .bird-fragment {
            position: absolute;
            width: 25%;
            height: 25%;
            opacity: 0.8;
            filter: blur(1px);
            animation: fragmentFloat 4s infinite alternate, fragmentToCenter 15s forwards;
            z-index: 6;
        }
        
        .jiaoMing-fragment {
            top: 10%;
            left: 40%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,20 Q60,30 70,40 Q80,60 70,80 Q60,90 50,95 Q40,90 30,80 Q20,60 30,40 Q40,30 50,20Z" fill="%23E3F2FD" stroke="%23FFFFFF" stroke-width="1" /></svg>') center/contain no-repeat;
            animation-delay: 0.5s;
        }
        
        .youChang-fragment {
            top: 50%;
            left: 10%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,20 Q60,30 70,40 Q80,60 70,80 Q60,90 50,95 Q40,90 30,80 Q20,60 30,40 Q40,30 50,20Z" fill="%238A2BE2" stroke="%236A1CA2" stroke-width="1" /></svg>') center/contain no-repeat;
            animation-delay: 1s;
        }
        
        .faMing-fragment {
            top: 70%;
            left: 40%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,20 Q60,30 70,40 Q80,60 70,80 Q60,90 50,95 Q40,90 30,80 Q20,60 30,40 Q40,30 50,20Z" fill="%23FFD700" stroke="%23DAA520" stroke-width="1" /></svg>') center/contain no-repeat;
            animation-delay: 1.5s;
        }
        
        .niePan-fragment {
            top: 50%;
            left: 70%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,20 Q60,30 70,40 Q80,60 70,80 Q60,90 50,95 Q40,90 30,80 Q20,60 30,40 Q40,30 50,20Z" fill="%23FF5722" stroke="%23D84315" stroke-width="1" /></svg>') center/contain no-repeat;
            animation-delay: 2s;
        }
        
        .huFeng-fragment {
            top: 30%;
            left: 60%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,20 Q60,30 70,40 Q80,60 70,80 Q60,90 50,95 Q40,90 30,80 Q20,60 30,40 Q40,30 50,20Z" fill="%2380C0FF" stroke="%234A90E2" stroke-width="1" /></svg>') center/contain no-repeat;
            animation-delay: 2.5s;
        }
        
        .fragment-particles {
            position: absolute;
            width: 150%;
            height: 150%;
            top: -25%;
            left: -25%;
            opacity: 0.7;
            filter: blur(1px);
        }
        
        /* 终极神鸟 */
        .ultimate-bird {
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            left: 25%;
            z-index: 7;
            opacity: 0;
            animation: ultimateBirdAppear 5s forwards 10s;
        }
        
        .ultimate-bird-outline {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><defs><linearGradient id="outline-gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23E3F2FD"/><stop offset="25%" stop-color="%238A2BE2"/><stop offset="50%" stop-color="%23FFD700"/><stop offset="75%" stop-color="%23FF5722"/><stop offset="100%" stop-color="%2380C0FF"/></linearGradient></defs><path d="M100,40 Q120,60 140,80 Q160,120 140,160 Q120,180 100,190 Q80,180 60,160 Q40,120 60,80 Q80,60 100,40Z" fill="none" stroke="url(%23outline-gradient)" stroke-width="2" /></svg>') center/contain no-repeat;
            animation: outlineGlow 3s infinite alternate;
        }
        
        .ultimate-bird-energy {
            position: absolute;
            width: 140%;
            height: 140%;
            top: -20%;
            left: -20%;
            border-radius: 50%;
            background: radial-gradient(
                circle,
                rgba(255, 255, 255, 0.8) 0%,
                rgba(227, 242, 253, 0.3) 20%,
                rgba(138, 43, 226, 0.3) 40%,
                rgba(255, 215, 0, 0.3) 60%,
                rgba(255, 87, 34, 0.3) 80%,
                rgba(128, 192, 255, 0.3) 90%,
                rgba(0, 0, 0, 0) 100%
            );
            filter: blur(15px);
            animation: energyPulse 4s infinite alternate;
        }
        
        /* 文字动画区域 */
        .epic-text-container {
            position: absolute;
            bottom: 15%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 30px;
            z-index: 20;
        }
        
        .epic-text-line {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 4vw;
            color: #FFD700;
            opacity: 0;
            text-align: center;
            animation: textShake 3s infinite alternate;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8),
                         0 0 40px rgba(255, 215, 0, 0.4);
        }
        
        #text-line1 {
            animation-delay: 7s;
            animation: textAppear 2s forwards 6s, textShake 3s infinite 8s alternate;
        }
        
        #text-line2 {
            animation-delay: 9s;
            animation: textAppear 2s forwards 8s, textShake 3s infinite 10s alternate;
        }
        
        #text-line3 {
            animation-delay: 11s;
            animation: textAppear 2s forwards 10s, textShake 3s infinite 12s alternate;
        }
        
        .text-particle-container {
            position: relative;
            display: inline-block;
        }
        
        .text-particle-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(
                circle at center,
                rgba(255, 215, 0, 0.8),
                rgba(255, 215, 0, 0) 70%
            );
            filter: blur(8px);
            opacity: 0;
            animation: particlesConverge 2s forwards;
        }
        
        /* 闪电效果 */
        .lightning-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 30;
        }
        
        .lightning-bolt {
            position: absolute;
            opacity: 0;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
        }
        
        .bolt1 {
            top: 10%;
            left: 20%;
            width: 30%;
            height: 60%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M50,0 L40,50 L60,60 L20,200" stroke="%23FFFFFF" stroke-width="2" fill="none" /></svg>') center/contain no-repeat;
            animation: lightningFlash 1s infinite 1s;
        }
        
        .bolt2 {
            top: 15%;
            right: 20%;
            width: 20%;
            height: 70%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M50,0 L60,40 L30,80 L60,100 L40,200" stroke="%23FFFFFF" stroke-width="2" fill="none" /></svg>') center/contain no-repeat;
            animation: lightningFlash 1s infinite 1.5s;
        }
        
        .bolt3 {
            top: 40%;
            left: 15%;
            width: 25%;
            height: 50%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M80,0 L40,60 L70,80 L0,200" stroke="%23FFFFFF" stroke-width="2" fill="none" /></svg>') center/contain no-repeat;
            animation: lightningFlash 1s infinite 2s;
        }
        
        .bolt4 {
            top: 30%;
            right: 15%;
            width: 25%;
            height: 60%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M20,0 L60,70 L30,100 L100,200" stroke="%23FFFFFF" stroke-width="2" fill="none" /></svg>') center/contain no-repeat;
            animation: lightningFlash 1s infinite 2.5s;
        }
        
        .bolt5 {
            top: 20%;
            left: 40%;
            width: 20%;
            height: 60%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M30,0 L50,40 L20,80 L60,120 L40,200" stroke="%23FFFFFF" stroke-width="2" fill="none" /></svg>') center/contain no-repeat;
            animation: lightningFlash 1s infinite 3s;
        }
        
        /* 能量波动环 */
        .energy-pulse-rings {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9;
            pointer-events: none;
        }
        
        .pulse-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),
                        inset 0 0 20px rgba(255, 255, 255, 0.2);
            opacity: 0;
        }
        
        .pulse-ring:nth-child(1) {
            animation: pulseRingExpand 4s infinite 0s;
        }
        
        .pulse-ring:nth-child(2) {
            animation: pulseRingExpand 4s infinite 1.3s;
        }
        
        .pulse-ring:nth-child(3) {
            animation: pulseRingExpand 4s infinite 2.6s;
        }
        
        /* 动画效果 */
        @keyframes slowSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes rotateRing {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        @keyframes pulseSize {
            0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.6; }
            50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.8; }
        }
        
        @keyframes distortionRotate {
            0% { transform: rotate(0deg) scale(1); opacity: 0.5; }
            50% { transform: rotate(180deg) scale(1.05); opacity: 0.7; }
            100% { transform: rotate(360deg) scale(1); opacity: 0.5; }
        }
        
        @keyframes lightningFlash {
            0%, 100% { opacity: 0; }
            5%, 15% { opacity: 1; }
            20% { opacity: 0; }
            25% { opacity: 0.7; }
            30% { opacity: 0; }
        }
        
        @keyframes totemPulse {
            0%, 100% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); }
            50% { box-shadow: 0 0 60px rgba(255, 255, 255, 0.4); }
        }
        
        @keyframes slowRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes corePulse {
            0% { transform: scale(0.9); box-shadow: 0 0 40px rgba(255, 255, 255, 0.7); }
            100% { transform: scale(1.1); box-shadow: 0 0 80px rgba(255, 255, 255, 0.9),
                                                      0 0 120px rgba(255, 215, 0, 0.7),
                                                      0 0 160px rgba(138, 43, 226, 0.5); }
        }
        
        @keyframes coreRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes corePulseExpand {
            0%, 100% { transform: scale(0.8); opacity: 0.4; }
            50% { transform: scale(1.2); opacity: 0.6; }
        }
        
        @keyframes raysSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes flareFlash {
            0%, 100% { opacity: 0.1; transform: scale(0.9); }
            50% { opacity: 0.4; transform: scale(1.1); }
            10%, 90% { opacity: 0.8; transform: scale(1.05); }
        }
        
        @keyframes fragmentFloat {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(5px, -5px) rotate(3deg); }
        }
        
        @keyframes fragmentToCenter {
            0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.8; }
            80% { transform: translate(0, 0) scale(0.8) rotate(180deg); opacity: 0.6; filter: blur(2px); }
            100% { transform: translate(0, 0) scale(0.1) rotate(360deg); opacity: 0; filter: blur(5px); }
        }
        
        @keyframes ultimateBirdAppear {
            0% { opacity: 0; transform: scale(0.5); }
            100% { opacity: 1; transform: scale(1); }
        }
        
        @keyframes outlineGlow {
            0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7))
                         drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
            100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
                          drop-shadow(0 0 20px rgba(255, 215, 0, 0.7))
                          drop-shadow(0 0 30px rgba(138, 43, 226, 0.5)); }
        }
        
        @keyframes energyPulse {
            0% { opacity: 0.4; transform: scale(0.9); }
            100% { opacity: 0.7; transform: scale(1.1); }
        }
        
        @keyframes textAppear {
            0% { opacity: 0; transform: translateY(20px); }
            50% { opacity: 0.5; }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes textShake {
            0%, 100% { transform: translate(0, 0); }
            10% { transform: translate(-1px, 0); }
            30% { transform: translate(1px, 0); }
            50% { transform: translate(0, -1px); }
            70% { transform: translate(0, 1px); }
            90% { transform: translate(-1px, -1px); }
        }
        
        @keyframes particlesConverge {
            0% { opacity: 0; transform: scale(2); }
            100% { opacity: 0.8; transform: scale(1); }
        }
        
        @keyframes pulseRingExpand {
            0% { width: 0; height: 0; opacity: 1; }
            100% { width: 180%; height: 180%; opacity: 0; }
        }
        
        /* 技术解析区 */
        .tech-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: rgba(10, 26, 53, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 50px;
            z-index: 1000;
        }
        
        .tech-item {
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
            color: white;
            animation: pulse-opacity 3s infinite;
        }
        
        @keyframes pulse-opacity {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }
        
        /* 音乐播放器 */
        .music-player {
            position: fixed;
            bottom: 80px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid #d4af37;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1001;
            cursor: pointer;
            animation: rotate-music 10s linear infinite;
        }
        
        @keyframes rotate-music {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* 页脚 */
        footer {
            width: 100%;
            height: 120px;
            background: #0a1a35;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body class="hide-scrollbar">
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="logo">
            <span class="iconify" data-icon="mdi:feather" style="color: #d4af37; margin-right: 10px;"></span>
            五神鸟
        </div>
        <div class="nav-links">
            <a href="首頁.html">首页</a>
            <a href="神鳥傳説界面.html">神鸟传说</a>
            <a href="科技神韻界面.html" class="active">科技互动</a>
            <a href="文化传承.html">文化传承</a>
            <a href="关于我们.html">关于我们</a>
        </div>
        <div class="utility-buttons">
            <span class="iconify" data-icon="mdi:magnify" style="color: white; font-size: 24px;"></span>
            <button class="lang-btn">中文</button>
        </div>
    </div>

    <!-- 全屏神鸟区 -->
    <section class="full-screen hero">
        <!-- 背景层 -->
        <div class="dark-essence"></div>
        
        <!-- 动态光束系统 -->
        <div class="dynamic-light-system">
            <div class="light-beam-container">
                <div class="light-beam primary-beam"></div>
                <div class="light-beam secondary-beam"></div>
                <div class="light-beam tertiary-beam"></div>
                <!-- 添加光圈 -->
                <div class="light-halo halo-large"></div>
                <div class="light-halo halo-medium"></div>
                <div class="light-halo halo-small"></div>
            </div>
            <div class="light-particles-container"></div>
            <div class="light-edge-fracture"></div>
            <div class="tyndall-effect"></div>
        </div>
        
        <!-- 神鸟实体 -->
        <div class="phoenix-entity">
            <!-- 基础轮廓 -->
            <div class="phoenix-silhouette">
                <!-- 神鸟轮廓 - 光明与黑暗的交界 -->
                <svg width="400" height="600" viewBox="0 0 400 600" class="phoenix-svg">
                    <defs>
                        <linearGradient id="light-shadow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stop-color="#000" stop-opacity="1"></stop>
                            <stop offset="40%" stop-color="#000" stop-opacity="0.8"></stop>
                            <stop offset="50%" stop-color="#d4af37" stop-opacity="0.9"></stop>
                            <stop offset="60%" stop-color="#fff" stop-opacity="0.95"></stop>
                            <stop offset="100%" stop-color="#fff" stop-opacity="1"></stop>
                        </linearGradient>
                        <filter id="light-glow">
                            <feGaussianBlur stdDeviation="6" result="blur"></feGaussianBlur>
                            <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
                        </filter>
                        <clipPath id="phoenix-clip">
                            <path d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z"></path>
                        </clipPath>
                        <mask id="light-mask">
                            <rect x="0" y="0" width="400" height="600" fill="white"></rect>
                            <path d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z" fill="black" transform="translate(20, 0)"></path>
                        </mask>
                    </defs>
                    
                    <!-- 基础轮廓 -->
                    <path class="phoenix-outline" d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z" fill="none" stroke="#d4af37" stroke-width="1" stroke-opacity="0.8"></path>
                    
                    <!-- 发光轮廓 - 重叠效果 -->
                    <path class="phoenix-glow" d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z" fill="none" stroke="#fff" stroke-width="0.5" stroke-opacity="0.6" filter="url(#light-glow)"></path>
                    
                    <!-- 黑暗部分 - 烟雾效果区域 -->
                    <path class="dark-body" d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z" fill="#000" fill-opacity="0.85"></path>
                    
                    <!-- 光明部分 - 将被光照亮的区域 -->
                    <path class="light-body" d="M200,50 Q250,150 300,200 Q350,300 320,400 Q280,500 200,550 Q120,500 80,400 Q50,300 100,200 Q150,150 200,50Z" fill="url(#light-shadow-gradient)" fill-opacity="0.95" mask="url(#light-mask)"></path>
                    
                    <!-- 眼睛 -->
                    <circle class="phoenix-eye left-eye" cx="150" cy="200" r="8" fill="#fff" filter="url(#light-glow)"></circle>
                    <circle class="phoenix-eye right-eye" cx="250" cy="200" r="8" fill="#fff" filter="url(#light-glow)"></circle>
                </svg>
                
                <!-- 晶体羽毛光效 -->
                <div class="crystal-feathers"></div>
                
                <!-- 黑暗烟雾效果 -->
                <div class="dark-smoke-container"></div>
                
                <!-- 余烬粒子效果 -->
                <div class="ember-particles"></div>
            </div>
        </div>
        
        <!-- 文本标题组 -->
        <div class="title-group">
            <div class="title-light-effect"></div>
            <h1 class="main-title">光·影·神性</h1>
            <p class="sub-title">于明暗交错间，窥见神鸟之魂</p>
        </div>
        
        <!-- 粒子系统 -->
        <div class="particle-system">
            <div class="dust-particles"></div>
            <div class="light-fragments"></div>
        </div>
    </section>

    <!-- 神鸟光影艺术展示区 -->
    <!-- 鹪明 - 清辉之灵 -->
    <section class="full-screen bird-section jiaoMing-section" id="jiaoMing">
        <!-- 云海/竹林背景 -->
        <div class="jiaoMing-background">
            <div class="bamboo-forest"></div>
            <div class="cloud-sea"></div>
            <div class="tyndall-light"></div>
            <div class="tyndall-light tyndall-light-2"></div>
            <div class="tyndall-light tyndall-light-3"></div>
        </div>
        
        <!-- 标题区域 -->
        <div class="jiaoMing-title-area">
            <h2 class="jiaoMing-title">鹪明</h2>
            <p class="jiaoMing-subtitle">清辉之灵</p>
        </div>
        
        <!-- 神鸟主体 -->
        <div class="jiaoMing-entity">
            <!-- 水晶能量体 -->
            <div class="crystal-body">
                <div class="energy-pulse"></div>
                <div class="crystal-core"></div>
                <div class="crystal-aura"></div>
            </div>
            
            <!-- 光粒子系统 -->
            <div class="particle-container">
                <div class="particle p1"></div>
                <div class="particle p2"></div>
                <div class="particle p3"></div>
                <div class="particle p4"></div>
                <div class="particle p5"></div>
                <div class="particle p6"></div>
                <div class="particle p7"></div>
                <div class="particle p8"></div>
                <div class="particle p9"></div>
                <div class="particle p10"></div>
                <div class="particle p11"></div>
                <div class="particle p12"></div>
                <div class="particle p13"></div>
                <div class="particle p14"></div>
                <div class="particle p15"></div>
            </div>
            
            <!-- 投影 -->
            <div class="jiaoMing-shadow"></div>
        </div>
        
        <!-- 技术标签 -->
        <div class="tech-chips">
            <div class="tech-chip">实时光影渲染引擎</div>
            <div class="tech-chip">粒子动态模拟系统</div>
            <div class="tech-chip">精准光学设计</div>
        </div>
        
        <!-- 句子 -->
        <p class="jiaoMing-desc">清辉所至，灵性自显</p>
    </section>

    <!-- 幽昌 - 幽玄之影 -->
    <section class="full-screen bird-section youChang-section" id="youChang">
        <!-- 星云背景 -->
        <div class="youChang-background">
            <div class="void-mist"></div>
            <div class="star-nebula"></div>
            <div class="mystic-runes"></div>
            <div class="blue-spotlight"></div>
        </div>
        
        <!-- 标题区域 -->
        <div class="youChang-title-area">
            <h2 class="youChang-title">幽昌</h2>
            <p class="youChang-subtitle">幽玄之影</p>
        </div>
        
        <!-- 神鸟主体 -->
        <div class="youChang-entity">
            <!-- 暗影神鸟本体 -->
            <div class="shadow-body">
                <div class="golden-patterns"></div>
                <div class="purple-fire-eyes"></div>
                <div class="golden-edge-glow"></div>
            </div>
            
            <!-- 黑羽粒子系统 -->
            <div class="feather-container">
                <div class="feather f1"></div>
                <div class="feather f2"></div>
                <div class="feather f3"></div>
                <div class="feather f4"></div>
                <div class="feather f5"></div>
                <div class="feather f6"></div>
                <div class="feather f7"></div>
                <div class="feather f8"></div>
                <div class="feather f9"></div>
                <div class="feather f10"></div>
                <div class="feather f11"></div>
                <div class="feather f12"></div>
                <div class="feather f13"></div>
                <div class="feather f14"></div>
                <div class="feather f15"></div>
            </div>
            
            <!-- 投影 -->
            <div class="youChang-shadow"></div>
        </div>
        
        <!-- 技术标签 -->
        <div class="tech-chips youChang-chips">
            <div class="tech-chip youChang-chip">深度光影处理技术</div>
            <div class="tech-chip youChang-chip">高密度粒子模拟</div>
            <div class="tech-chip youChang-chip">玄影投射系统</div>
        </div>
        
        <!-- 句子 -->
        <p class="youChang-desc">幽光深处，自有威仪</p>
    </section>

    <!-- 发明 - 锐金之芒 -->
    <section class="full-screen bird-section faMing-section" id="faMing">
        <!-- 几何线条背景 -->
        <div class="faMing-background">
            <div class="grid-perspective"></div>
            <div class="circuit-lines"></div>
            <div class="energy-flow"></div>
            <div class="laser-beams"></div>
        </div>
        
        <!-- 标题区域 -->
        <div class="faMing-title-area">
            <h2 class="faMing-title">发明</h2>
            <p class="faMing-subtitle">锐金之芒</p>
        </div>
        
        <!-- 神鸟主体 -->
        <div class="faMing-entity">
            <!-- 金属神鸟本体 -->
            <div class="metallic-body">
                <div class="crystal-core"></div>
                <div class="sensor-eyes"></div>
                <div class="edge-highlights"></div>
                <div class="blade-feathers"></div>
            </div>
            
            <!-- 金色三角碎片粒子系统 -->
            <div class="shard-container">
                <div class="shard s1"></div>
                <div class="shard s2"></div>
                <div class="shard s3"></div>
                <div class="shard s4"></div>
                <div class="shard s5"></div>
                <div class="shard s6"></div>
                <div class="shard s7"></div>
                <div class="shard s8"></div>
                <div class="shard s9"></div>
                <div class="shard s10"></div>
                <div class="shard s11"></div>
                <div class="shard s12"></div>
                <div class="shard s13"></div>
                <div class="shard s14"></div>
                <div class="shard s15"></div>
            </div>
            
            <!-- 投影 -->
            <div class="faMing-shadow"></div>
        </div>
        
        <!-- 技术标签 -->
        <div class="tech-chips faMing-chips">
            <div class="tech-chip faMing-chip">锐光元素构建</div>
            <div class="tech-chip faMing-chip">金属构造渲染</div>
            <div class="tech-chip faMing-chip">精密几何投影</div>
        </div>
        
        <!-- 句子 -->
        <p class="faMing-desc">芒刃所向，洞见真理</p>
    </section>

    <!-- 涅槃 - 焰光重生 -->
    <section class="full-screen bird-section niePan-section" id="niePan">
        <!-- 涅槃背景效果 -->
        <div class="niePan-background">
            <div class="flame-aura"></div>
            <div class="ember-field"></div>
            <div class="rainbow-glow"></div>
        </div>
        
        <!-- 标题区域 -->
        <div class="niePan-title-area">
            <h2 class="niePan-title">凤凰</h2>
            <p class="niePan-subtitle">焰光重生</p>
        </div>
        
        <!-- 凤凰主体 -->
        <div class="niePan-entity">
            <!-- 凤凰本体 -->
            <div class="phoenix-body">
                <div class="base-wings"></div>
                <div class="rainbow-layer"></div>
                <div class="energy-glow"></div>
                <div class="eye-sparkles"></div>
                <div class="beak-highlight"></div>
                <div class="edge-flow"></div>
            </div>
            
            <!-- 光尘粒子系统 -->
            <div class="particle-flow">
                <div class="light-particle p1"></div>
                <div class="light-particle p2"></div>
                <div class="light-particle p3"></div>
                <div class="light-particle p4"></div>
                <div class="light-particle p5"></div>
                <div class="light-particle p6"></div>
                <div class="light-particle p7"></div>
                <div class="light-particle p8"></div>
                <div class="light-particle p9"></div>
                <div class="light-particle p10"></div>
                <div class="light-particle p11"></div>
                <div class="light-particle p12"></div>
                <div class="light-particle p13"></div>
                <div class="light-particle p14"></div>
                <div class="light-particle p15"></div>
            </div>
            
            <!-- 尾羽拖尾效果 -->
            <div class="tail-stream">
                <div class="trail-particle t1"></div>
                <div class="trail-particle t2"></div>
                <div class="trail-particle t3"></div>
                <div class="trail-particle t4"></div>
                <div class="trail-particle t5"></div>
                <div class="trail-particle t6"></div>
                <div class="trail-particle t7"></div>
                <div class="trail-particle t8"></div>
                <div class="trail-particle t9"></div>
                <div class="trail-particle t10"></div>
            </div>
        </div>
        
        <!-- 凤凰标语 -->
        <p class="niePan-desc">燧炎之中，涅槃永生</p>
    </section>

    <!-- 凤凰 - 焚烬之煌 -->
    <section class="full-screen bird-section huFeng-section" id="huFeng">
        <!-- 冰雪风暴背景 -->
        <div class="huFeng-background">
            <div class="frost-mist"></div>
            <div class="ice-crystal-field"></div>
            <div class="giant-snowflake"></div>
            <div class="cold-radiance"></div>
            <!-- 增强背景元素 -->
            <div class="deep-ice-structure"></div>
            <div class="polar-vortex"></div>
            <div class="dynamic-frost-waves"></div>
        </div>
        
        <!-- 标题区域 -->
        <div class="huFeng-title-area">
            <h2 class="huFeng-title">鹔鹴</h2>
            <p class="huFeng-subtitle">朔风之痕</p>
        </div>
        
        <!-- 神鸟主体 -->
        <div class="huFeng-entity">
            <!-- 冰霜神鸟本体 -->
            <div class="frost-body">
                <div class="ice-patterns"></div>
                <div class="crystal-eyes"></div>
                <div class="frost-edge-glow"></div>
            </div>
            
            <!-- 冰晶粒子拖尾系统 -->
            <div class="ice-trail-container">
                <div class="ice-trail i1"></div>
                <div class="ice-trail i2"></div>
                <div class="ice-trail i3"></div>
                <div class="ice-trail i4"></div>
                <div class="ice-trail i5"></div>
                <div class="ice-trail i6"></div>
                <div class="ice-trail i7"></div>
                <div class="ice-trail i8"></div>
                <div class="ice-trail i9"></div>
                <div class="ice-trail i10"></div>
                <div class="ice-trail i11"></div>
                <div class="ice-trail i12"></div>
                <div class="ice-trail i13"></div>
                <div class="ice-trail i14"></div>
                <div class="ice-trail i15"></div>
            </div>
            
            <!-- 冰晶拖尾效果 -->
            <div class="ice-trail-container">
                <div class="ice-comet ic1"></div>
                <div class="ice-comet ic2"></div>
                <div class="ice-comet ic3"></div>
                <div class="ice-comet ic4"></div>
                <div class="ice-comet ic5"></div>
                <div class="ice-comet ic6"></div>
                <div class="ice-comet ic7"></div>
                <div class="ice-comet ic8"></div>
                <div class="ice-comet ic9"></div>
                <div class="ice-comet ic10"></div>
            </div>
            
            <!-- 环绕冰旋风 -->
            <div class="frost-vortex-container">
                <div class="frost-vortex v1"></div>
                <div class="frost-vortex v2"></div>
                <div class="frost-vortex v3"></div>
                <div class="frost-vortex v4"></div>
                <div class="frost-vortex v5"></div>
                <div class="frost-vortex v6"></div>
            </div>
            
            <!-- 螺旋冰风 -->
            <div class="ice-spiral-container">
                <div class="ice-spiral"></div>
            </div>
            
            <!-- 投影 -->
            <div class="huFeng-shadow"></div>
        </div>
        
        <!-- 雪花前景层 -->
        <div class="snowflake-overlay">
            <div class="corner-frost top-left"></div>
            <div class="corner-frost top-right"></div>
            <div class="corner-frost bottom-left"></div>
            <div class="corner-frost bottom-right"></div>
            <!-- 镜头霜冻效果 -->
            <div class="lens-frost"></div>
            <div class="frost-vignette"></div>
            
            <!-- 动态雪花粒子 -->
            <div id="dynamic-snowflakes"></div>
        </div>
        
        <!-- 技术信息框 -->
        <div class="tech-info-container">
            <div class="tech-info-box">
                <div class="tech-info-item">极寒粒子模拟</div>
                <div class="tech-info-item">流体动力学解算</div>
                <div class="tech-info-item">实时凝霜渲染</div>
            </div>
        </div>
        
        <!-- 诗句 -->
        <p class="huFeng-desc">寒芒所至，万物成霜</p>
    </section>

    <!-- 五神巡天 · 集体之力展区 -->
    <section class="full-screen collective-section" id="convergence-section">
        <!-- 能量漩涡背景 -->
        <div class="energy-vortex-container">
            <div class="vortex-ring vortex-ring-1"></div>
            <div class="vortex-ring vortex-ring-2"></div>
            <div class="vortex-ring vortex-ring-3"></div>
            <div class="vortex-distortion"></div>
            <div class="energy-lightning"></div>
        </div>
        
        <!-- 五神鸟融合区域 -->
        <div class="sacred-totem">
            <!-- 中央能量核心 -->
            <div class="energy-core">
                <div class="core-pulse"></div>
                <div class="core-rays"></div>
                <div class="core-flare"></div>
            </div>
            
            <!-- 五神鸟碎片 -->
            <div class="bird-fragments-container">
                <!-- 白色鹪明碎片 -->
                <div class="bird-fragment jiaoMing-fragment">
                    <div class="fragment-particles"></div>
                </div>
                <!-- 紫色幽昌碎片 -->
                <div class="bird-fragment youChang-fragment">
                    <div class="fragment-particles"></div>
                </div>
                <!-- 金色发明碎片 -->
                <div class="bird-fragment faMing-fragment">
                    <div class="fragment-particles"></div>
                </div>
                <!-- 红色涅槃碎片 -->
                <div class="bird-fragment niePan-fragment">
                    <div class="fragment-particles"></div>
                </div>
                <!-- 蓝色鹔鹴碎片 -->
                <div class="bird-fragment huFeng-fragment">
                    <div class="fragment-particles"></div>
                </div>
            </div>
            
            <!-- 终极神鸟轮廓 -->
            <div class="ultimate-bird">
                <div class="ultimate-bird-outline"></div>
                <div class="ultimate-bird-energy"></div>
            </div>
        </div>
        
        <!-- 文字动画区域 -->
        <div class="epic-text-container">
            <div class="epic-text-line" id="text-line1">
                <span class="text-particle-container">五行归元</span>
            </div>
            <div class="epic-text-line" id="text-line2">
                <span class="text-particle-container">神鸟合一</span>
            </div>
            <div class="epic-text-line" id="text-line3">
                <span class="text-particle-container">万物新生</span>
            </div>
        </div>
        
        <!-- 能量粒子系统 -->
        <div class="particle-system">
            <!-- 粒子将由JS动态生成 -->
        </div>
        
        <!-- 闪电效果 -->
        <div class="lightning-container">
            <div class="lightning-bolt bolt1"></div>
            <div class="lightning-bolt bolt2"></div>
            <div class="lightning-bolt bolt3"></div>
            <div class="lightning-bolt bolt4"></div>
            <div class="lightning-bolt bolt5"></div>
        </div>
        
        <!-- 能量波动效果 -->
        <div class="energy-pulse-rings">
            <div class="pulse-ring"></div>
            <div class="pulse-ring"></div>
            <div class="pulse-ring"></div>
        </div>
    </section>

    <!-- 技术解析区 -->
    <div class="tech-bar">
        <div class="tech-item">实时光影渲染引擎</div>
        <div class="tech-item">粒子动态模拟系统</div>
        <div class="tech-item">精准光学设计</div>
    </div>

    <!-- 音乐播放器 -->
    <div class="music-player">
        <span class="iconify" data-icon="mdi:music" style="color: white; font-size: 30px;"></span>
    </div>

    <!-- 页脚 -->
    <footer>
        <div>© 2023 五神鸟文化科技 版权所有</div>
        <div>备案号：ICP备12345678号-1</div>
        <div>联系方式：contact@wushenniao.com</div>
    </footer>

    <script>
        // 音乐播放器交互
        const musicPlayer = document.querySelector('.music-player');
        let isPlaying = false;
        
        // 神鸟区高级动态效果
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化光束粒子系统
            initLightParticles();
            
            // 初始化黑暗烟雾效果
            initDarkSmoke();
            
            // 初始化余烬粒子
            initEmberParticles();
            
            // 初始化尘埃粒子
            initDustParticles();
            
            // 初始化光碎片
            initLightFragments();
        });
        
        // 光束粒子系统
        function initLightParticles() {
            const container = document.querySelector('.light-particles-container');
            for (let i = 0; i < 100; i++) {
                const particle = document.createElement('div');
                particle.classList.add('light-particle');
                
                // 随机大小
                const size = 1 + Math.random() * 3;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机初始位置 - 集中在中心光柱区域
                const posX = 50 + (Math.random() - 0.5) * 20; // 中心区域左右10%范围
                const posY = Math.random() * 100; // 整个高度
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;
                
                // 随机透明度
                particle.style.opacity = 0.5 + Math.random() * 0.5;
                
                // 随机颜色 - 从白到金
                const colorRatio = Math.random();
                const r = 255;
                const g = Math.floor(253 - colorRatio * 78);
                const b = Math.floor(255 - colorRatio * 200);
                particle.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
                particle.style.boxShadow = `0 0 ${size * 1.5}px rgba(${r}, ${g}, ${b}, 0.8)`;
                
                // 应用动画
                animateLightParticle(particle);
                
                container.appendChild(particle);
            }
            
            // 添加样式
            const style = document.createElement('style');
            style.textContent = `
                .light-particle {
                    position: absolute;
                    border-radius: 50%;
                    pointer-events: none;
                    z-index: 3;
                }
            `;
            document.head.appendChild(style);
        }
        
        // 光粒子动画
        function animateLightParticle(particle) {
            // 随机参数
            const duration = 2 + Math.random() * 3;
            const delay = Math.random() * 2;
            const initialX = parseFloat(particle.style.left);
            
            // 光柱区域附近随机移动
            const xMovement = (Math.random() - 0.5) * 10;
            const yMovement = 30 + Math.random() * 40;
            
            // 随机消失点
            const vanishPoint = 70 + Math.random() * 30; // 70-100% 的高度处消失
            
            // 应用动画
            particle.animate([
                { // 起始状态
                    transform: 'translate(0, 0) scale(1)',
                    opacity: parseFloat(particle.style.opacity)
                },
                { // 移动并逐渐消失
                    transform: `translate(${xMovement}px, ${-yMovement}vh) scale(0.5)`,
                    opacity: 0
                }
            ], {
                duration: duration * 1000,
                delay: delay * 1000,
                iterations: Infinity,
                easing: 'cubic-bezier(0.4, 0, 0.6, 1)'
            });
            
            // 周期性重置粒子位置
            setTimeout(() => {
                // 重置垂直位置但保持水平位置相对稳定
                const resetY = Math.random() * 100;
                const resetX = initialX + (Math.random() - 0.5) * 5;
                
                particle.style.top = `${resetY}%`;
                particle.style.left = `${resetX}%`;
                
                // 重新应用动画
                animateLightParticle(particle);
            }, (duration + delay) * 1000);
        }
        
        // 初始化黑暗烟雾
        function initDarkSmoke() {
            const container = document.querySelector('.dark-smoke-container');
            for (let i = 0; i < 15; i++) {
                const smoke = document.createElement('div');
                smoke.classList.add('smoke-cloud');
                
                // 随机大小
                const size = 30 + Math.random() * 40;
                smoke.style.width = `${size}px`;
                smoke.style.height = `${size}px`;
                
                // 随机位置 - 在神鸟左侧
                const posX = 20 + Math.random() * 30;
                const posY = 20 + Math.random() * 60;
                smoke.style.left = `${posX}%`;
                smoke.style.top = `${posY}%`;
                
                // 随机旋转
                const rotation = Math.random() * 360;
                smoke.style.transform = `rotate(${rotation}deg)`;
                
                // 随机透明度
                smoke.style.opacity = 0.2 + Math.random() * 0.5;
                
                container.appendChild(smoke);
                animateSmoke(smoke);
            }
            
            // 添加样式
            const style = document.createElement('style');
            style.textContent = `
                .smoke-cloud {
                    position: absolute;
                    border-radius: 50%;
                    background: radial-gradient(circle at center, rgba(10,10,10,0.9) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 80%);
                    filter: blur(5px);
                    pointer-events: none;
                    z-index: 4;
                }
            `;
            document.head.appendChild(style);
        }
        
        // 烟雾动画
        function animateSmoke(smoke) {
            // 随机参数
            const duration = 5 + Math.random() * 5;
            const delay = Math.random() * 3;
            
            // 向上飘动
            const xMovement = (Math.random() - 0.5) * 20;
            const yMovement = -(20 + Math.random() * 30);
            
            // 随机扩散和旋转
            const scaleIncrease = 1.5 + Math.random() * 0.5;
            const rotationChange = (Math.random() - 0.5) * 60;
            const currentRotation = parseFloat(smoke.style.transform.replace('rotate(', '').replace('deg)', '') || 0);
            
            // 应用动画
            smoke.animate([
                { // 起始状态
                    transform: `rotate(${currentRotation}deg) scale(1)`,
                    opacity: parseFloat(smoke.style.opacity)
                },
                { // 扩散、旋转、上升、淡出
                    transform: `translate(${xMovement}px, ${yMovement}vh) rotate(${currentRotation + rotationChange}deg) scale(${scaleIncrease})`,
                    opacity: 0
                }
            ], {
                duration: duration * 1000,
                delay: delay * 1000,
                iterations: 1,
                easing: 'ease-out'
            });
            
            // 动画完成后重置
            setTimeout(() => {
                // 重置位置
                const posX = 20 + Math.random() * 30;
                const posY = 20 + Math.random() * 60;
                smoke.style.left = `${posX}%`;
                smoke.style.top = `${posY}%`;
                
                // 重置透明度
                smoke.style.opacity = 0.2 + Math.random() * 0.5;
                
                // 随机旋转
                const rotation = Math.random() * 360;
                smoke.style.transform = `rotate(${rotation}deg)`;
                
                // 重新应用动画
                animateSmoke(smoke);
            }, (duration + delay) * 1000);
        }
        
        // 初始化余烬粒子
        function initEmberParticles() {
            const container = document.querySelector('.ember-particles');
            for (let i = 0; i < 40; i++) {
                const ember = document.createElement('div');
                ember.classList.add('ember');
                
                // 随机大小
                const size = 1 + Math.random() * 2;
                ember.style.width = `${size}px`;
                ember.style.height = `${size}px`;
                
                // 随机位置 - 主要集中在神鸟左侧
                const posX = 10 + Math.random() * 40;
                const posY = 20 + Math.random() * 60;
                ember.style.left = `${posX}%`;
                ember.style.top = `${posY}%`;
                
                // 随机颜色 - 从橙色到红色
                const r = 200 + Math.floor(Math.random() * 55);
                const g = 50 + Math.floor(Math.random() * 100);
                const b = Math.floor(Math.random() * 50);
                ember.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
                ember.style.boxShadow = `0 0 ${size * 2}px rgba(${r}, ${g}, ${b}, 0.8)`;
                
                container.appendChild(ember);
                animateEmber(ember);
            }
            
            // 添加样式
            const style = document.createElement('style');
            style.textContent = `
                .ember {
                    position: absolute;
                    border-radius: 50%;
                    pointer-events: none;
                    z-index: 5;
                }
            `;
            document.head.appendChild(style);
        }
        
        // 余烬动画
        function animateEmber(ember) {
            // 随机参数
            const duration = 2 + Math.random() * 3;
            const delay = Math.random() * 2;
            
            // 向上飘动，微妙水平飘动
            const xMovement = (Math.random() - 0.5) * 30;
            const yMovement = -(20 + Math.random() * 40);
            
            // 应用动画
            ember.animate([
                { // 起始状态
                    transform: 'translate(0, 0) scale(1)',
                    opacity: 0.9
                },
                { // 上升并消失
                    transform: `translate(${xMovement}px, ${yMovement}vh) scale(0.2)`,
                    opacity: 0
                }
            ], {
                duration: duration * 1000,
                delay: delay * 1000,
                iterations: 1,
                easing: 'ease-out'
            });
            
            // 动画完成后重置
            setTimeout(() => {
                // 重置位置
                const posX = 10 + Math.random() * 40;
                const posY = 20 + Math.random() * 60;
                ember.style.left = `${posX}%`;
                ember.style.top = `${posY}%`;
                
                // 重新应用动画
                animateEmber(ember);
            }, (duration + delay) * 1000);
        }
        
        // 初始化尘埃粒子
        function initDustParticles() {
            const container = document.querySelector('.dust-particles');
            for (let i = 0; i < 60; i++) {
                const dust = document.createElement('div');
                dust.classList.add('dust');
                
                // 极小尺寸
                const size = 0.5 + Math.random() * 1.5;
                dust.style.width = `${size}px`;
                dust.style.height = `${size}px`;
                
                // 随机位置 - 整个光束区域
                const posX = 30 + Math.random() * 40;
                const posY = Math.random() * 100;
                dust.style.left = `${posX}%`;
                dust.style.top = `${posY}%`;
                
                // 颜色从白到浅金
                const colorRatio = Math.random();
                const r = 255;
                const g = 255 - Math.floor(colorRatio * 30);
                const b = 255 - Math.floor(colorRatio * 60);
                dust.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
                dust.style.opacity = 0.3 + Math.random() * 0.4;
                
                container.appendChild(dust);
                animateDust(dust);
            }
            
            // 添加样式
            const style = document.createElement('style');
            style.textContent = `
                .dust {
                    position: absolute;
                    border-radius: 50%;
                    pointer-events: none;
                    z-index: 3;
                    filter: blur(0.5px);
                }
            `;
            document.head.appendChild(style);
        }
        
        // 尘埃动画
        function animateDust(dust) {
            // 随机参数
            const duration = 5 + Math.random() * 10;
            const delay = Math.random() * 5;
            
            // 缓慢漂浮
            const xMovement = (Math.random() - 0.5) * 20;
            const yMovement = (Math.random() - 0.5) * 20;
            
            // 应用动画
            dust.animate([
                { transform: 'translate(0, 0)' },
                { transform: `translate(${xMovement}px, ${yMovement}px)` }
            ], {
                duration: duration * 1000,
                delay: delay * 1000,
                iterations: Infinity,
                direction: 'alternate',
                easing: 'ease-in-out'
            });
        }
        
        // 初始化光碎片
        function initLightFragments() {
            const container = document.querySelector('.light-fragments');
            for (let i = 0; i < 25; i++) {
                const fragment = document.createElement('div');
                fragment.classList.add('light-fragment');
                
                // 尺寸
                const size = 2 + Math.random() * 4;
                fragment.style.width = `${size}px`;
                fragment.style.height = `${size}px`;
                
                // 随机位置 - 主要在光暗交界处
                const posX = 45 + Math.random() * 10;
                const posY = 20 + Math.random() * 60;
                fragment.style.left = `${posX}%`;
                fragment.style.top = `${posY}%`;
                
                // 颜色 - 明亮的金色和白色
                const isGold = Math.random() > 0.5;
                if (isGold) {
                    fragment.style.backgroundColor = '#d4af37';
                    fragment.style.boxShadow = '0 0 5px rgba(212, 175, 55, 0.8)';
                } else {
                    fragment.style.backgroundColor = '#ffffff';
                    fragment.style.boxShadow = '0 0 5px rgba(255, 255, 255, 0.8)';
                }
                
                container.appendChild(fragment);
                animateFragment(fragment);
            }
            
            // 添加样式
            const style = document.createElement('style');
            style.textContent = `
                .light-fragment {
                    position: absolute;
                    border-radius: 0%;
                    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
                    pointer-events: none;
                    z-index: 4;
                }
            `;
            document.head.appendChild(style);
        }
        
        // 光碎片动画
        function animateFragment(fragment) {
            // 随机参数
            const duration = 3 + Math.random() * 4;
            const delay = Math.random() * 3;
            
            // 向外迸发
            const direction = Math.random() * Math.PI * 2; // 随机方向
            const distance = 20 + Math.random() * 40; // 飞出距离
            const xMovement = Math.cos(direction) * distance;
            const yMovement = Math.sin(direction) * distance;
            
            // 旋转
            const rotation = Math.random() * 720 - 360; // -360到360度
            
            // 应用动画
            fragment.animate([
                { // 起始状态
                    transform: 'translate(0, 0) rotate(0deg) scale(1)',
                    opacity: 0.9
                },
                { // 飞出、旋转并消失
                    transform: `translate(${xMovement}px, ${yMovement}px) rotate(${rotation}deg) scale(0.2)`,
                    opacity: 0
                }
            ], {
                duration: duration * 1000,
                delay: delay * 1000,
                iterations: 1,
                easing: 'cubic-bezier(0.2, 0.8, 0.3, 1)'
            });
            
            // 动画完成后重置
            setTimeout(() => {
                // 重置位置
                const posX = 45 + Math.random() * 10;
                const posY = 20 + Math.random() * 60;
                fragment.style.left = `${posX}%`;
                fragment.style.top = `${posY}%`;
                
                // 重新应用动画
                animateFragment(fragment);
            }, (duration + delay) * 1000);
        }
        
        musicPlayer.addEventListener('click', () => {
            isPlaying = !isPlaying;
            if (isPlaying) {
                musicPlayer.style.animationPlayState = 'running';
            } else {
                musicPlayer.style.animationPlayState = 'paused';
            }
        });
        
        // 五神集结页面特效
        document.addEventListener('DOMContentLoaded', function() {
            // 创建能量粒子系统
            createEnergyParticles();
            
            // 创建屏幕震动效果
            const convergenceSection = document.getElementById('convergence-section');
            if(convergenceSection) {
                // 监测滚动到该区域时触发震动
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if(entry.isIntersecting) {
                            setTimeout(() => {
                                screenShake();
                                playSoundEffect('energy-surge');
                            }, 2000);
                            
                            // 文字出现时播放音效
                            setTimeout(() => playSoundEffect('text-appear'), 6000);
                            setTimeout(() => playSoundEffect('text-appear'), 8000);
                            setTimeout(() => playSoundEffect('text-appear'), 10000);
                            
                            observer.unobserve(entry.target);
                        }
                    });
                }, {threshold: 0.6});
                
                observer.observe(convergenceSection);
            }
            
            // 生成随机的闪电位置
            randomizeLightningPositions();
        });
        
        // 创建能量粒子系统
        function createEnergyParticles() {
            const particleSystem = document.querySelector('.particle-system');
            if (!particleSystem) return;
            
            // 清空容器
            particleSystem.innerHTML = '';
            
            // 创建五种颜色的粒子
            const colors = [
                '#E3F2FD', // 鹪明 - 白/淡蓝
                '#8A2BE2', // 幽昌 - 紫色
                '#FFD700', // 发明 - 金色
                '#FF5722', // 涅槃 - 红色
                '#80C0FF'  // 鹔鹴 - 蓝色
            ];
            
            // 创建200个粒子
            for (let i = 0; i < 200; i++) {
                const particle = document.createElement('div');
                particle.classList.add('energy-particle');
                
                // 随机大小 (1-4px)
                const size = 1 + Math.random() * 3;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机颜色
                const color = colors[Math.floor(Math.random() * colors.length)];
                particle.style.backgroundColor = color;
                particle.style.boxShadow = `0 0 ${size * 2}px ${color}`;
                
                // 随机位置 - 集中在中心区域
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 40 + 10; // 以中心为原点的距离
                const x = Math.cos(angle) * distance;
                const y = Math.sin(angle) * distance;
                
                particle.style.left = `calc(50% + ${x}%)`;
                particle.style.top = `calc(50% + ${y}%)`;
                
                // 随机动画
                const duration = 2 + Math.random() * 4;
                const delay = Math.random() * 2;
                const directionX = (Math.random() - 0.5) * 100;
                const directionY = (Math.random() - 0.5) * 100;
                
                particle.animate([
                    { 
                        transform: 'translate(0, 0) scale(1)',
                        opacity: 0.8
                    },
                    { 
                        transform: `translate(${directionX}px, ${directionY}px) scale(0)`,
                        opacity: 0
                    }
                ], {
                    duration: duration * 1000,
                    delay: delay * 1000,
                    iterations: Infinity
                });
                
                particleSystem.appendChild(particle);
            }
            
            // 添加CSS样式
            const style = document.createElement('style');
            style.textContent = `
                .energy-particle {
                    position: absolute;
                    border-radius: 50%;
                    opacity: 0.8;
                    z-index: 8;
                    pointer-events: none;
                }
            `;
            document.head.appendChild(style);
        }
        
        // 屏幕震动效果
        function screenShake() {
            const convergenceSection = document.getElementById('convergence-section');
            if (!convergenceSection) return;
            
            // 创建震动动画
            convergenceSection.animate([
                { transform: 'translate(0px, 0px)' },
                { transform: 'translate(-5px, 3px)' },
                { transform: 'translate(3px, -5px)' },
                { transform: 'translate(-8px, -2px)' },
                { transform: 'translate(5px, 5px)' },
                { transform: 'translate(-3px, 2px)' },
                { transform: 'translate(0px, 0px)' }
            ], {
                duration: 500,
                iterations: 4
            });
        }
        
        // 音效系统
        function playSoundEffect(type) {
            // 这里仅是音效播放的占位符，真实实现需要实际的音频资源
            console.log(`Playing sound effect: ${type}`);
            
            // 如果有真实的音频，可以这样实现：
            /*
            const sound = new Audio();
            switch(type) {
                case 'energy-surge':
                    sound.src = 'sounds/energy-surge.mp3';
                    break;
                case 'text-appear':
                    sound.src = 'sounds/text-appear.mp3';
                    break;
                default:
                    return;
            }
            sound.volume = 0.7;
            sound.play();
            */
        }
        
        // 随机闪电位置
        function randomizeLightningPositions() {
            const lightningBolts = document.querySelectorAll('.lightning-bolt');
            
            lightningBolts.forEach(bolt => {
                // 随机位置
                const top = Math.random() * 70 + 10; // 10-80%
                const left = Math.random() * 80 + 10; // 10-90%
                
                bolt.style.top = `${top}%`;
                bolt.style.left = `${left}%`;
                
                // 随机大小
                const size = 20 + Math.random() * 40; // 20-60%
                bolt.style.width = `${size}%`;
                bolt.style.height = `${size}%`;
                
                // 随机旋转
                const rotation = Math.random() * 360;
                bolt.style.transform = `rotate(${rotation}deg)`;
            });
        }

        // 鹪明粒子动画
        document.addEventListener('DOMContentLoaded', function() {
            const particles = document.querySelectorAll('.particle');
            
            // 为每个粒子设置随机动画
            particles.forEach((particle, index) => {
                const delay = Math.random() * 5; // 随机延迟
                const duration = 3 + Math.random() * 4; // 随机持续时间
                
                particle.style.animation = `particleRise ${duration}s infinite ${delay}s`;
                
                // 随机大小
                const size = 3 + Math.random() * 6;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机位置偏移
                const offsetX = Math.random() * 30 - 15;
                const offsetY = Math.random() * 20 - 10;
                particle.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
                
                // 随机透明度
                particle.style.opacity = 0.3 + Math.random() * 0.7;
            });
            
            // 幽昌黑羽粒子动画
            const feathers = document.querySelectorAll('.feather');
            
            // 为每个黑羽设置随机动画
            feathers.forEach((feather, index) => {
                const delay = Math.random() * 8; // 随机延迟
                const duration = 4 + Math.random() * 6; // 随机持续时间
                
                feather.style.animation = `featherFall ${duration}s infinite ${delay}s`;
                
                // 随机大小
                const size = 6 + Math.random() * 8;
                feather.style.width = `${size}px`;
                feather.style.height = `${size * 1.8}px`;
                
                // 随机初始位置
                const startX = Math.random() * 120 - 60; // 水平分布
                const startY = Math.random() * 60 - 120; // 从顶部开始向下飘落
                feather.style.left = `calc(50% + ${startX}px)`;
                feather.style.top = `calc(40% + ${startY}px)`;
                
                // 随机透明度
                feather.style.opacity = 0.5 + Math.random() * 0.5;
                
                // 随机旋转
                const rotation = Math.random() * 360;
                feather.style.transform = `rotate(${rotation}deg)`;
            });
            
            // 发明金色三角碎片动画
            const shards = document.querySelectorAll('.shard');
            
            // 为每个碎片设置随机动画
            shards.forEach((shard, index) => {
                const delay = Math.random() * 8; // 随机延迟
                const duration = 5 + Math.random() * 8; // 随机持续时间
                
                // 随机大小
                const size = 8 + Math.random() * 10;
                shard.style.width = `${size}px`;
                shard.style.height = `${size}px`;
                
                // 随机初始位置 - 围绕神鸟的360度分布
                const angle = Math.random() * 360;
                const distance = 80 + Math.random() * 100; // 距离中心的半径
                const startX = Math.cos(angle * Math.PI / 180) * distance;
                const startY = Math.sin(angle * Math.PI / 180) * distance;
                shard.style.left = `calc(50% + ${startX}px)`;
                shard.style.top = `calc(50% + ${startY}px)`;
                
                // 随机透明度
                shard.style.opacity = 0.5 + Math.random() * 0.5;
                
                // 创建旋转+平移的复合动画
                const rotationSpeed = 1 + Math.random() * 3; // 旋转速度
                const moveRadius = 10 + Math.random() * 30; // 移动半径
                const direction = index % 2 ? 1 : -1; // 随机方向
                
                shard.animate([
                    { transform: `rotate(0deg) translate(0, 0)` },
                    { transform: `rotate(${360 * direction}deg) translate(${moveRadius}px, ${moveRadius}px)` }
                ], {
                    duration: duration * 1000,
                    iterations: Infinity,
                    delay: delay * 1000,
                    easing: 'linear'
                });
            });
        });

        // 视差滚动效果
        window.addEventListener('scroll', function() {
            const scrollPosition = window.scrollY;
            const jiaoMingSection = document.getElementById('jiaoMing');
            const faMingSection = document.getElementById('faMing');
            
            // 只有当鹪明部分在视口中时执行视差效果
            const jiaoMingRect = jiaoMingSection.getBoundingClientRect();
            if (jiaoMingRect.top < window.innerHeight && jiaoMingRect.bottom > 0) {
                const tyndallLights = document.querySelectorAll('.tyndall-light');
                const crystalBody = document.querySelector('.crystal-body');
                const cloudSea = document.querySelector('.cloud-sea');
                
                // 光线视差
                tyndallLights.forEach((light, index) => {
                    const speed = 0.05 + (index * 0.02);
                    light.style.transform = `rotate(45deg) translateY(${scrollPosition * speed}px)`;
                });
                
                // 云海视差
                cloudSea.style.transform = `translateZ(-100px) translateY(${scrollPosition * 0.02}px)`;
                
                // 神鸟视差
                if (crystalBody) {
                    crystalBody.style.transform = `translateY(${-scrollPosition * 0.03}px)`;
                }
            }
            
            // 只有当发明部分在视口中时执行视差效果
            const faMingRect = faMingSection.getBoundingClientRect();
            if (faMingRect.top < window.innerHeight && faMingRect.bottom > 0) {
                const gridPerspective = document.querySelector('.grid-perspective');
                const laserBeams = document.querySelector('.laser-beams');
                const metallicBody = document.querySelector('.metallic-body');
                
                // 网格视差
                gridPerspective.style.transform = `perspective(500px) rotateX(60deg) scale(3) translateY(${-scrollPosition * 0.01}%)`;
                
                // 激光视差
                laserBeams.style.transform = `translateY(${scrollPosition * 0.02}px)`;
                
                // 神鸟视差
                if (metallicBody) {
                    metallicBody.style.transform = `translateY(${-scrollPosition * 0.03}px) rotateY(${scrollPosition * 0.01}deg)`;
                }
            }
        });
    </script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 现有的粒子动画代码...
            
            // 涅槃凤凰粒子效果
            const lightParticles = document.querySelectorAll('.light-particle');
            const trailParticles = document.querySelectorAll('.trail-particle');
            
            // 鹔鹴冰晶粒子拖尾效果
            const iceTrails = document.querySelectorAll('.ice-trail');
            const frostVortexes = document.querySelectorAll('.frost-vortex');
            const iceComets = document.querySelectorAll('.ice-comet');
            
            // 冰晶粒子随机位置和动画
            iceTrails.forEach((trail, index) => {
                // 随机颜色 - 冰蓝到白色
                const hue = 200 + Math.random() * 20; // 蓝色范围
                const lightness = 80 + Math.random() * 20; // 较亮
                trail.style.color = `hsl(${hue}, 80%, ${lightness}%)`;
                
                // 随机大小 2-5px
                const size = 2 + Math.random() * 3;
                trail.style.width = `${size}px`;
                trail.style.height = `${size}px`;
                
                // 随机初始位置 - 分布在神鸟周围
                const angle = Math.random() * 360;
                const distance = 10 + Math.random() * 40; // 距离中心的半径
                const posX = Math.cos(angle * Math.PI / 180) * distance;
                const posY = Math.sin(angle * Math.PI / 180) * distance;
                
                trail.style.left = `calc(50% + ${posX}px)`;
                trail.style.top = `calc(50% + ${posY}px)`;
                
                // 粒子动画 - 从神鸟体内飞出并消失
                const duration = 3 + Math.random() * 2;
                const delay = Math.random() * 5;
                const targetX = Math.cos(angle * Math.PI / 180) * 200; // 飞行距离
                const targetY = Math.sin(angle * Math.PI / 180) * 100;
                
                trail.animate([
                    { transform: 'translateX(0) translateY(0) rotate(0deg)', opacity: 0 },
                    { transform: `translateX(${targetX * 0.3}px) translateY(${targetY * 0.3}px) rotate(${90 * (index % 2 ? 1 : -1)}deg)`, opacity: 0.9 },
                    { transform: `translateX(${targetX}px) translateY(${targetY}px) rotate(${180 * (index % 2 ? 1 : -1)}deg)`, opacity: 0 }
                ], {
                    duration: duration * 1000,
                    delay: delay * 1000,
                    iterations: Infinity,
                    easing: 'cubic-bezier(0.1, 0.9, 0.2, 1)'
                });
            });
            
            // 冰旋风效果
            frostVortexes.forEach((vortex, index) => {
                // 随机缩放和旋转
                const scale = 0.8 + Math.random() * 0.4;
                const rotation = Math.random() * 360;
                
                vortex.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
                
                // 随机延迟
                const delay = index * 1.5;
                vortex.style.animationDelay = `${delay}s`;
                
                // 随机速度
                const duration = 10 + Math.random() * 20;
                vortex.style.animationDuration = `${duration}s`;
            });
            
            // 增强型冰晶拖尾效果
            iceComets.forEach((comet, index) => {
                // 随机颜色 - 冰蓝到白色
                const hue = 190 + Math.random() * 30; // 蓝色范围
                const lightness = 80 + Math.random() * 20; // 较亮
                comet.style.color = `hsl(${hue}, 70%, ${lightness}%)`;
                
                // 随机大小 4-10px
                const size = 4 + Math.random() * 6;
                comet.style.width = `${size}px`;
                comet.style.height = `${size}px`;
                
                // 随机初始位置 - 分布在神鸟身体周围
                const angle = Math.random() * 360;
                const distance = 30 + Math.random() * 50;
                const posX = Math.cos(angle * Math.PI / 180) * distance;
                const posY = Math.sin(angle * Math.PI / 180) * distance;
                
                comet.style.left = `calc(50% + ${posX}px)`;
                comet.style.top = `calc(50% + ${posY}px)`;
                
                // 随机方向
                const rotation = Math.random() * 360;
                comet.style.transform = `rotate(${rotation}deg)`;
                
                // 轨迹动画
                const duration = 2.5 + Math.random() * 2;
                const delay = Math.random() * 5;
                
                comet.animate([
                    { transform: `rotate(${rotation}deg) scale(0.2)`, opacity: 0 },
                    { transform: `rotate(${rotation}deg) scale(1)`, opacity: 0.9 },
                    { transform: `rotate(${rotation}deg) scale(0.5)`, opacity: 0 }
                ], {
                    duration: duration * 1000,
                    delay: delay * 1000,
                    iterations: Infinity,
                    easing: 'ease-in-out'
                });
                
                // 拖尾效果
                if (comet.querySelector('::after')) {
                    comet.querySelector('::after').style.transform = `rotate(${rotation}deg)`;
                }
            });
            
            // 创建动态雪花粒子
            function createSnowflakes() {
                const snowflakeContainer = document.getElementById('dynamic-snowflakes');
                const snowflakeCount = 80; // 雪花数量
                
                for (let i = 0; i < snowflakeCount; i++) {
                    const snowflake = document.createElement('div');
                    snowflake.classList.add('snowflake-particle');
                    
                    // 随机尺寸
                    const size = 3 + Math.random() * 7;
                    snowflake.style.width = `${size}px`;
                    snowflake.style.height = `${size}px`;
                    
                    // 随机位置
                    snowflake.style.left = `${Math.random() * 100}%`;
                    snowflake.style.top = `-${Math.random() * 20}px`;
                    
                    // 随机透明度
                    snowflake.style.opacity = 0.5 + Math.random() * 0.5;
                    
                    // 随机延迟和持续时间
                    const delay = Math.random() * 10;
                    const duration = 10 + Math.random() * 20;
                    snowflake.style.animationDelay = `${delay}s`;
                    snowflake.style.animationDuration = `${duration}s`;
                    
                    // 随机水平偏移
                    const leftOffset = (Math.random() * 200) - 100;
                    snowflake.style.animationName = 'snowfall';
                    
                    // 添加自定义动画
                    const horizontalMovement = Math.random() * 100 - 50;
                    const rotationSpeed = Math.random() * 720 - 360;
                    
                    snowflake.animate([
                        { transform: `translateX(0) translateY(-10%) rotate(0deg)`, opacity: 0 },
                        { transform: `translateX(${horizontalMovement * 0.3}px) translateY(20%) rotate(${rotationSpeed * 0.3}deg)`, opacity: 0.8 },
                        { transform: `translateX(${horizontalMovement}px) translateY(110%) rotate(${rotationSpeed}deg)`, opacity: 0.2 }
                    ], {
                        duration: duration * 1000,
                        delay: delay * 1000,
                        iterations: Infinity,
                        easing: 'linear'
                    });
                    
                    // 添加到容器
                    snowflakeContainer.appendChild(snowflake);
                }
            }
            
            // 初始化雪花
            createSnowflakes();
            
            // 创建雪花效果
            function createSnowflakes() {
                const snowflakeContainer = document.querySelector('.snowflake-overlay');
                const snowflakeCount = 50; // 雪花数量
                
                for (let i = 0; i < snowflakeCount; i++) {
                    const snowflake = document.createElement('div');
                    snowflake.classList.add('snowflake');
                    
                    // 随机尺寸
                    const size = 2 + Math.random() * 5;
                    snowflake.style.width = `${size}px`;
                    snowflake.style.height = `${size}px`;
                    
                    // 随机位置
                    snowflake.style.left = `${Math.random() * 100}%`;
                    snowflake.style.top = `${Math.random() * 100}%`;
                    
                    // 随机透明度
                    snowflake.style.opacity = 0.3 + Math.random() * 0.7;
                    
                    // 添加到容器
                    snowflakeContainer.appendChild(snowflake);
                    
                    // 应用动画
                    animateSnowflake(snowflake);
                }
            }
            
            function animateSnowflake(snowflake) {
                // 随机速度和方向
                const duration = 5 + Math.random() * 15; // 下落时间
                const delay = Math.random() * 5; // 开始延迟
                const horizontalMovement = Math.random() * 100 - 50; // 水平摆动范围
                
                snowflake.animate([
                    { transform: 'translateX(0) translateY(0) rotate(0deg)', opacity: 0.8 },
                    { transform: `translateX(${horizontalMovement}px) translateY(${window.innerHeight}px) rotate(360deg)`, opacity: 0 }
                ], {
                    duration: duration * 1000,
                    delay: delay * 1000,
                    iterations: Infinity,
                    easing: 'linear'
                });
            }
            
            // 创建雪花CSS
            const styleSheet = document.createElement('style');
            styleSheet.textContent = `
                .snowflake {
                    position: absolute;
                    background: white;
                    border-radius: 50%;
                    pointer-events: none;
                    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
                    z-index: 20;
                }
            `;
            document.head.appendChild(styleSheet);
            
            // 初始化雪花
            createSnowflakes();
            
            // 光尘粒子随机颜色和位置
            lightParticles.forEach((particle, index) => {
                // 随机颜色 - 从指定的三种颜色中选择
                const colors = ['#FFEA00', '#FF70F3', '#00D1FF'];
                const randomColor = colors[Math.floor(Math.random() * colors.length)];
                particle.style.color = randomColor;
                particle.style.background = randomColor;
                
                // 随机大小 1-3px
                const size = 1 + Math.random() * 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机位置 - 分布在凤凰周围
                const angle = Math.random() * 360;
                const distance = 50 + Math.random() * 100; // 距离中心的半径
                const posX = Math.cos(angle * Math.PI / 180) * distance;
                const posY = Math.sin(angle * Math.PI / 180) * distance;
                
                particle.style.left = `calc(50% + ${posX}px)`;
                particle.style.top = `calc(50% + ${posY}px)`;
                
                // 随机动画延迟
                const delay = Math.random() * 3;
                const duration = 2 + Math.random();
                particle.style.animationDelay = `${delay}s`;
                particle.style.animationDuration = `${duration}s`;
            });
            
            // 尾部流光粒子
            trailParticles.forEach((particle, index) => {
                // 随机颜色 - 从金黄到橙红
                const hue = 40 + Math.random() * 20; // 黄金色范围
                particle.style.color = `hsl(${hue}, 100%, 60%)`;
                particle.style.background = `hsl(${hue}, 100%, 80%)`;
                
                // 固定位置在尾部区域，随机分布
                const baseX = -60 - Math.random() * 40; // 负值表示尾部
                const baseY = -30 + Math.random() * 60; // 上下分散
                
                particle.style.left = `calc(50% + ${baseX}px)`;
                particle.style.top = `calc(50% + ${baseY}px)`;
                
                // 随机闪烁延迟
                const delay = Math.random() * 0.5;
                particle.style.animationDelay = `${delay}s`;
                
                // 轨迹动画
                const duration = 4 + Math.random() * 3;
                
                particle.animate([
                    { transform: 'translateX(0) translateY(0)', opacity: 0.6 },
                    { transform: `translateX(-${20 + Math.random() * 40}px) translateY(${Math.random() * 20 - 10}px)`, opacity: 0.9 },
                    { transform: `translateX(-${50 + Math.random() * 60}px) translateY(${Math.random() * 30 - 15}px)`, opacity: 0.3 },
                    { transform: `translateX(-${100 + Math.random() * 80}px) translateY(${Math.random() * 40 - 20}px)`, opacity: 0 }
                ], {
                    duration: duration * 1000,
                    iterations: Infinity,
                    easing: 'ease-out'
                });
            });
        });
    </script>

</body></html>